1、emit
官网中给出的emit的说明是这样的:
示例我觉得给的有点模糊,反正我看着是不太清楚,在此贴出官网地址。
下面说说我自己的看法:参数eventName实际是要绑定一个自定义事件,参数[...args]是不定个数的参数(可参考es6中的相关语法),说白了就是你可以用0个、1个、2个......参数来放到[...args]的位置上,作用就是在此次通信中传递你想要传递的参数。
<div id="app">
<p>{{ total }}</p>
<my-component @increase="handleGetTotal"></my-component>
</div>
Vue.component('my-component', {
template: '<div>\
<button @click="handleIncrease">+1</button>\
</div>',
data: function () {
return {
counter: 0
}
},
methods: {
handleIncrease: function () {
this.counter++;
this.$emit('increase', this.counter);
}
}
});
var app = new Vue({
el: "#app",
data: {
total: 0
},
methods: {
handleGetTotal: function (total) {
this.total = total;
}
}
})
在上述代码中,子组件内有一个数据counter,在子组件的数据中改变counter然后通过$emit将参数传递给父组件,从而实现子组件向父组件传递数据。
注:个人整理,若有错误,欢迎批评指正,期待共同进步。