[JavaScript知识库]Vue组件间的通信(组件传值)

一.定义

? ? ? ?vue组件之间的通信（传递数据）是必然的，依据vue组件之间的关系（父子、兄弟以及无关组件）会有不同的做法。

二.分类?

• 父子组件：父--->子:props，refs? ? 子--->父：事件（tips：上个blog有说到）

????????注：父组件给子组件传值也叫正向传值，反之则为逆向传值。

????????1）父给子组件：refs（tips：props上个blog有说到）

????????用标签的方式使用组件（eg：<my-com/>），实际就是创建了组件对象。只要拿到组件对象，那么组件对象里的methods就可以使用。refs是vue中获取dom的一种方式，dom也是标签，标签就是组件对象。拿到了dom，就相当于拿到了组件对象（这句话需要细细品味吆~）

? ? ? ? 如果某个元素使用ref属性，那么在vue对象里，就可以用$this.refs访问。可以认为就是给元素增加了id属性，在vue中就可以操作该dom了。

格式：

?<p ref = "pId"> {{msg}}</p>

?methods:{
? ? ?testf:function(){
? ? ? ??? ?this.$refs.pId.innerHTML = "hi";
? ? ?}

}

?
let myCom = {
    template:`
        <div>            
        </div>
    `,
    data(){
        return {

        }
    },
    methods:{
        focusFn(str){
            console.log(str);
        }
    }
}

Vue.component("my-com",myCom);

new Vue({
    el:"#app",
    data:{
        msg:"hi"
    },
    methods:{
        fn(){
            this.$refs.comId.focusFn(this.msg);//focusFn()是子组件里的函数。
        }
    }
});

?

• ?兄弟组件

????????1）事件总线

? ? ? ? vue-bus实质就是创建一个vue实例，通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件通信的一种解决方案。

步骤：

1. 单独new一个Vue空对象： ?let bus= new Vue();
2. 在组件A里，绑定一个自定义事件(相当于定义了一个自定义事件)：
   ?? ? ? ?bus.$on('eclick',target => {
   ? ? ? ? 　　console.log(target)　
   ? ? ? ? })
3. 在组件B里，触发事件
   ? ? ? bus.$emit('eclick',"b传给a的");

eg： 组件myCom2给组件myCom1传值，则myCom1绑定事件，组件myCom2触发事件。

// 定义一个vue对象（作为事件总线的对象）
let bus = new Vue();

let myCom1 = {
    template:`
        <div>
            <hr>
            组件com1
            <hr>
        </div>
    `,
    created(){
        // 注册了一个事件
        bus.$on("eclick",(target)=>{
            console.log(target);
        });        
    }
}

let myCom2 = {
    template:`
        <div>
            <input type="button" value="  传 " @click="fn" />
        </div>
    `,
    methods:{
        fn(){
            //触发事件
            bus.$emit("eclick","hello");
        }
    }
}

Vue.component("my-com1",myCom1);
Vue.component("my-com2",myCom2);

new Vue({
    el:"#app"
});

• 集中管理（$root）

????????把数据存到根实例的data选项，其他组件直接修改或者使用。

定义：

new Vue({
? data:{a:1}
})

使用：

//子组件内部
this // 子组件本身
this.$root // vm 根实例
this.xx //组件内部数据
this.$root.a //根实例数据?