Vue的组件通信自记

• props和$emit

        （适用于简单的父子组件间的通信）

        父组件 --> 子组件：通过props传递数据；

        子组件 --> 父组件：通过$emit触发事件来传递数据；

• $attrs和$listeners

        （适用于组件嵌套层数较多的组件间的通信，例如父A含B，B含C，想要进行A-->C的数据传递，或者A-->C往后）

// 父组件中定义了A组件
<A :messagec="messagec" @getData="getCData" />

// A组件中props接受messagec,且定义了B组件
props: ["messagec"],
<B v-bind="$attrs" v-on="$listeners" />

// B组件中不用props接收，且定义了C组件
<C v-bind="$attrs" v-on="$listeners" />

// C组件接受到数据，用于显示，并且能够触发事件与父组件通信
<div @click="cClickHandler">
    {{$attrs.messagec}}
</div>

methods: {
    cClickHandler(){
        this.$emit("getCData","我是C的数据");
    }
}

• 中央事件总线

        （适用于兄弟叔侄组件之间的通信，例如父组件下含有组件A、B，A组件下含有C或者更多子组件，它们想和B，或者是B以下的子组件进行通信）

// var一个bus的对象
var bus = new Vue(); xz

// 定义父组件App
var App = {
    data(){
        return {
            msg: "我是父组件的内容",
            messagec: "hello",
        }
    },
    methods:{},
    template:'
        <div>
            <brother1></brother1> // 子组件brother1
            <brother2></brother2> // 子组件brother2
        </div>
    '
};

//定义全局组件brother1
Vue.component('brother1',{
    data(){
        return {
            msg: "hello brother1",
            brother2Msg: "",
        }
    },
    mounted(){
        // 绑定全局事件globalEvent事件
        bus.$on('globalEvent',(val) => {
            bus.brother2Msg = val;
        })
    },
    methods:{},
    template:'
        <div>
            <p>我是老二</p>
            <p>老大传过来的数据：{{brother2Msg}}</p>
        </div>
    '
});

//定义全局组件brother2
Vue.component('brother2',{
    data(){
        return {
            msg: "hello brother1",
        }
    },
    methods:{
        passData(val){
            // 触发全局事件globalEvent
            bus.$emit("globalEvent",val);
        },
    },
    template:'
        <div>
            <p>我是老大</p>
            <input type="text" v-model="msg" @input="passData(msg)" / >
        </div>
    '
});

• provide和inject

        父组件中通过provide来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用inject那么就可以注入provide的数据。而不是局限于只能从当前父组件的props属性来获取数据，只要在父组件的生命周期内，子组件都可以调用。

// 定义父组件App
var App = {
    data(){
        return {
        }
    },
    provide:{
        "for": '他爹',
    },
    template:'
        <div>
            <h2>我是入口组件</h2>
            <Parent / >
        </div>
    '
};

//定义全局组件Parent
Vue.component('Parent ',{
    template:'
        <div>
            <p>我是父亲</p>
            <Child / >
        </div>
    '
});

//定义全局组件Child 
Vue.component('Child ',{
    data(){
        return {
            msg: "",
        }
    },
    inject:["for"],
    created(){
        this.msg = this.for;
    },
    template:'
        <div>
            <p>我是孩子{{msg}}</p>
        </div>
    '
});