vue中组件通信之子父通信

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

猜你喜欢

转载自www.cnblogs.com/samve/p/9124754.html