<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' })