Vue 组件中的通信

props和$emit

父组件向子组件传参通过prop
子组件向父组件传参通过$emit

Vue.component('child', {
    props: ['parentMsg'], // 父组件传递的数据
    data() {
        return {
            title: 'child-title',
            model: ''
        }
    },
    template: `
        <div class="child">
            <h2>{{title}}</h2>
            <p>父组件Props传递: {{parentMsg}}</p>
            <input v-model="model" @input="toParent"/>
        </div>
    `,
    methods: {
        toParent() {
            this.$emit('childChangeModel', this.model); // 触发自定义事件
        }
    },
});

Vue.component('parent', {
    data() {
        return {
            title: 'parent-title',
            sendChild: 'some msg',
            childModel: '暂无传递'
        }
    },
    template: `
        <div class="parent">
            <h1>{{title}}</h1>
            <p>{{childModel}}</p>
            <hr>
            <child :parentMsg="sendChild" @childChangeModel="parentReceive"></child>
        </div>
    `,
    methods: {
        parentReceive(msg) { // 自定义事件监听后回调
            this.childModel = msg;
        }
    },
});

let app = new Vue({
    el: '#app',
    template: '<div><parent></parent></div>'
});

中央事件总线 event bus

同级或者跨级新建一个中间件为事件监听派发

let bus = new Vue(); // 中央事件总线

Vue.component('c1', {
    data() {
        return {
            msg: '组件Msg(1)'
        }
    },
    template: `
        <div>
            <p>这是组件1</p>
            <input type="text" v-model="msg" @input="triggerBus(msg)">
        </div>
    `,
    methods: {
        triggerBus(val) {
            bus.$emit('triggerBus', val); // 触发全局事件
        }
    }
});

Vue.component('c2', {
    template: `
        <div>
            <p>这是组件1</p>
            <p>brother1传递过来的数据：{{otherMsg}}</p>
        </div>
    `,
    data() {
        return {
            msg: '组件Msg(2)',
            otherMsg: ''
        }
    },
    mounted() {
        bus.$on('triggerBus', val => { // 监听全局事件
            this.otherMsg = val;
        })
    }
});

let app = new Vue({
    el: '#app',
    template: `
        <div>
            <c1></c1>
            <c2></c2>
        </div>
    `
});

provide和inject

有父组件向下派发provide子组件接受inject(只要在父组件生命周期内,多深的层级都可以接收到)

Vue.component('test', {
    inject: ['rootMsg'],//得到父组件传递过来的数据
    data() {
        return {
            msg: this.rootMsg
        }
    },
    template: '<h3>这是第三级组件我接收到了根组件的数据: {{msg}}</h3>'
});

Vue.component('child', {
    inject: ['rootMsg'],//得到父组件传递过来的数据
    data() {
        return {
            msg: this.rootMsg
        }
    },
    template: `
        <div>
            <h2>这是第二级组件我接收到了父组件的数据: {{msg}}</h2>
            <test></test>
        </div>
    `
});

Vue.component('parent', {
    template: `<div>{{title}}<child></child></div>`,
    provide: {
        rootMsg: 'test'
    },
    data() {
        return {
            title: '父组件'
        }
    }
});

let app = new Vue({
    el: '#app',
    template: `<div><parent></parent></div>`
})

v-model

Vue.component('child', {
    props: ['value'], //通过v-model传参 子组件props会有一个为value的字段
    data() {
        return {
            msg: this.value
        }
    },
    template: `<div><input type="text" v-model="msg"></div>`
});

Vue.component('parent', {
    template: `
        <div>
            <h1>这是父组件</h1>
            <child v-model="msg"></child>
        </div>
        `,
    data() {
        return {
            msg: '父组件信息'
        }
    }
});

let app = new Vue({
    el: '#app',
    template: `<div><parent></parent></div>`
});

父组件通过v-model传递值给子组件时，会传递一个为value的prop属性

$parent和$children

$parent父组件的实例$children子组件的实例(集合)

Vue.component('child', {
    name: 'childComponent',
    methods: {
        changeParentVal() {
            this.$parent.msg = this.parentMsg; // 修改父组件数据
        },
    },
    data() {
        return {
            parentMsg: this.$parent.msg,
            desc: '子组件描述'
        }
    },
    template: `
        <div>
            <h2>子组件</h2>
            <p>{{desc}}</p>
            <input type="text" v-model="parentMsg" @change="changeParentVal">
        </div>`
});

Vue.component('parent', {
    template: `
        <div>
            <h1>父组件</h1>
            <p>{{msg}}</p>
            <button @click="changeChildVal">test</button >
            <hr>
            <child></child>
        </div>
            `,
    methods: {
        changeChildVal() {
            console.log(this.$children);
            this.$children[0].desc = '父组件修改了子组件'; // 修改子组件信息
        }
    },
    data() {
        return {
            msg: '我是父组件是信息'
        }
    }
});

let app = new Vue({
    el: '#app',
    template: `<div><parent></parent></div>`
});

vuex处理组件之间的数据交互

More info: Vuex

$attrs和$listeners

...