我刚开始使用 vuejs (2.0)。我正在尝试关闭此功能:
- 点击一个按钮
- 子组件中的触发函数
- child 数据中的增量
这是我目前拥有的
HTML:
<div id="root">
<cart @addtocart="add()"></cart>
<button @click="$emit('addtocart')">Add to Cart</button>
</div>
JS:
Vue.component('cart', {
template: `<span>{{ items }}</span>`,
data() {
return {
items: 0
}
},
methods: {
add() {
alert('add');
}
}
});
new Vue({
el: '#root',
components: ['cart'],
});
如有任何帮助，我们将不胜感激。谢谢大家!
最佳答案
您可以使用集中式集线器向其发出事件(如文档 https://v2.vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced 中所建议)，然后在您的子组件中监听这些事件并使用react。这是对执行此操作的代码的快速更新:
var eventHub = new Vue();
Vue.component('cart', {
template: `<span>{{ items }}</span>`,
data() {
return {
items: 0
}
},
created() {
eventHub.$on('add-item', this.add)
},
methods: {
add() {
alert('add');
this.items++;
}
}
});
new Vue({
el: '#root',
components: ['cart'],
methods: {
addToCart() {
eventHub.$emit('add-item')
}
}
});
我自己刚开始使用 vue，所以我可能是错的，但据我所知，让子组件依赖于特定的父组件是一个坏主意，因为它会强制子组件“耦合”到该父组件以正常运行并使其不便携。从子组件备份发出事件很好，因为这只是让任何收听的人知道发生了什么事情的组件。我想您可以通过使用 this.$parent.$on('add-item', this.method) 直接访问父级及其发出的事件，但这对我来说看起来很老套。也许如果您的根组件和子组件始终以这种方式紧密耦合，this.$parent 就可以了。上面的“实例化一个新的 vue 实例”示例可能只是另一种方法，无需将子组件绑定(bind)到父组件，因为 Vue 实例实现了事件系统(因此公开了 $emit、$on 方法)
关于javascript - VueJS - 触发子函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41860127/