我对使用vuejs(2.0)还不熟悉.我正在try 降低此功能:
这就是我现在拥有的
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'],
});
任何帮助都将不胜感激.谢谢大家！
您可以使用一个集中式集线器将事件发送到(如docs https://vuejs.org/v2/guide/migration.html#dispatch-and-broadcast-replaced中所建议的)，然后在您的子组件中监听并响应这些事件.下面是代码的快速更新:
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就可以了.上面的"instatiating a new vue instance"示例可能只是实现这一点的另一种方法，而不需要将子组件绑定到父组件，因为vue实例实现了事件系统(从而在方法上公开$emit$)