子父通信:从子组件向上传递数据。
<div id="app">
<parent-comp1></parent-comp1>
<parent-comp1></parent-comp1>
</div>
Vue.component('child-comp1', {
template: `
<button @click="send">发送</button>
`,
data(){
return {
child_comp1: 'hello world!'
}
},
methods: {
send(){
this.$emit('child_comp1_send', this.child_comp1);
}
}
});
Vue.component('parent-comp1', {
template: `
<div>
<child-comp1 @child_comp1_send="get"></child-comp1>
<p>{{parent_comp1}}</p>
</div>
`,
data(){
return {
parent_comp1: ''
}
},
methods: {
get(data){
this.parent_comp1 = data;
}
}
});
new Vue({
el: '#app'
})
另一种方式:
有的时候用一个事件来抛出一个特定的值是非常有用的。这时可以使用 $emit 的第二个参数来提供这个值,然后当在父级组件监听这个事件的时候,我们可以通过 $event 访问到被抛出的这个值:
<div id="app">
<div id="blog-posts-events-demo">
<div :style="{fontSize: postFontSize+'em'}">
<my-component @enlarge-text="postFontSize+=$event"></my-component>
<p>Sometimes this is desirable for readability.</p>
</div>
</div>
</div>
Vue.component('my-component', {
template: `<button @click="$emit('enlarge-text', 0.2)">Enlarge text</button>`
});
let vm = new Vue({
el: '#app',
data: {
postFontSize: 1
}
});