vue组件间的九种通信方式

533 阅读6分钟

前言

Vue组件实例间的作用域是相互独立的,而通常一个页面是由很多个组件构成,这些组件可能又嵌套了组件,形成了一个关系网图,它们的关系可能是像下图中一样,大致分为两种使用场景,父子组件间通信和非父子组件间通信,父子组件间通信又分为直接父子关系和间接父子关系。vue提供了多种通信方法,针对不同的通信需求,选择最合适的通信方式能帮助我们提高开发效率。本文简要介绍了九种通信方式以及适用场景,记录下在学习中的收货。

组件关系.png

父子组件间的通信

props和$emit

这是父子组件在传参时中常用的一种方式,父组件通过v-bind传入参数,子组件通过props来接收,子组件通过内建的$emit方法传入事件名来触发一个事件,父组件通过v-on像监听原生DOM事件一样来监听这个事件。

// 父组件CompFather
<template>
    <div>
        <comp-son
            :title-name="title_name"
            @changeTitle="changeTitle"
        />
        <div>父组件的title_name:{{ title_name }}</div>
    </div>
</template><script>
    import CompSon from "./CompSon";
    export default {
        name: "CompFather",
        components: {CompSon},
        data() {
            return {
                title_name: "我是初始值"
            }
        },
        methods: {
            changeTitle(val) {
                this.title_name = val;
            }
        }
    }
</script>
// 子组件CompSon
<template>
   <div>
      <div>子组件的titleName:{{titleName}}</div>
      <button @click="changeTitle">改变</button>
   </div>
</template><script>
   export default {
      name: "CompSon",
      props: {
         titleName: {
            type: String,
            required: true
         }
      },
      methods: {
         changeTitle() {
            this.$emit("changeTitle", "我变了");
         }
      }
   }
</script>

适用场景:适用于直接父子关系(中间无嵌套组件)的组件间进行通信。

$attrs$listeners

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (classstyle 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (classstyle 除外),并且可以通过 v-bind="$attrs" 传入内部组件。

// Comp1.vue
<template>
   <comp2
      :flag="flag"
      :id="id"
      :msg="msg"
   />
</template><script>
   import Comp2 from "./comp2";
   export default {
      name: "comp1",
      components: {Comp2},
      data() {
         return {
            id: 1,
            msg: "comp1's msg",
            flag: true
         }
      }
   }
</script>
// Comp2.vue
<template>
   <div>
      <div>comp2的$attrs:{{$attrs}}</div>
      <comp3 v-bind="$attrs" />
   </div>
</template><script>
   import Comp3 from "./comp3";
   export default {
      name: "comp2",
      components: {Comp3},
      props: {
         flag: Boolean
      },
      mounted() {
         console.log(this.$attrs); // { "id": 1, "msg": "comp1's msg" }
      }
   }
</script>
// Comp3.vue
<template>
   <div>comp3的$attrs:{{ $attrs }}</div>
</template><script>
   export default {
      name: "comp3",
      props: {
         msg: String
      },
      mounted() {
         console.log(this.$attrs);  // { "id": 1 }
      }
   }
</script>

这里Comp2的props接收了Comp1传入的flag,因此Comp2中的$attrs没有flag参数,Comp3接收了msg,因此$attrs只有id。

适用场景:组件之间跨级传参,可以使用$attrs属性,这样使得代码更加简洁,更利于维护。

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。

当我们要封装一个input类型的组件时,我们可以通过.native的方式监听它的原生事件。

// App.vue
<my-input @input.native="inputData" :value="value" />
// MyInput.vue
<template>
   <input
         type="text"
         :value="value"
         @input="$emit('input',e.target.value)"
      >
</template><script>
   export default {
      name: "MyInput",
      props: {
         value: String
      },
   }
</script>

但如果此时的inputlabel标签包裹了一层,input不再是根组件时,父组件的.native将监听失效,于是vue给我们提供了$listeners属性来解决这个问题。

// MyInput.vue
<template>
   <label>
      value:{{ value }}
      <input
         type="text"
         :value="value"
         @input="$emit('input',e.target.value)"
      >
   </label>
</template>

以下是使用$listeners属性进行监听:

// App.vue
<template>
   <my-input v-model="value" @focus="onFocus" @input="inputData" />
</template><script>
   export default {
      name: "App",
      data() {
          value: ""
      },
       onFocus() {
            console.log("获得焦点");
        },
​
        inputData(val) {
            console.log(val);
        }
   }
</script>
<template>
   <label>
      value:{{ value }}
      <input
         type="text"
         :value="value"
         v-on="inputListeners"
      >
   </label>
</template><script>
   export default {
      name: "MyInput",
      props: {
         value: String
      },
      computed: {
         inputListeners: function () {
            const vm = this
            // `Object.assign` 将所有的对象合并为一个新对象
            return Object.assign({},
               // 我们从父级添加所有的监听器
               this.$listeners,
               // 然后我们添加自定义监听器,
               // 或覆写一些监听器的行为
               {
                  // 这里确保组件配合 `v-model` 的工作
                  input: function (event) {
                     vm.$emit('input', event.target.value)
                  }
               }
            )
         }
      },
   }
</script>

适用场景:当需要监听子组件的原生事件,且子组件可能是经过重构的组件时,可以使用$listeners来代替.native监听,当然也不只是包含原生事件监听器,只是在这里监听原生事件比较合适,我们还有其它方式来做事件监听。

$children/$parent/$root

$children是当前实例的直接子组件,不保证顺序,数组顺序不一定是子组件在该父组件中的渲染顺序,也不是响应式的。

如果当前实例有父组件的话,$parent则是当前实例的父实例。

$root是当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。通过this.$root来访问。

<script>
   export default {
      name: "MyComp",
      data() {
          value: ""
      },
      mounted: {
        console.log(this.$parent);
        console.log(this.$children);
        console.log(this.$root);
      }
   }
</script>

缺点:$children获取到的实例不保证顺序,因此当有多个子组件时可能获取到的不是自己想要的那一个。当组件嵌套多级时,可能会出现$parent.$parent.$parent...的情况,对于后续维护不友好。

适用场景:尽量使用其它方式来代替$parent/$chilren

ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素;如果用在子组件上,引用就指向组件实例。

// App.vue
<template>
  <comp1 ref="comp1"/>
</template><script>
   export default {
      name: "App",
      data() {
          value: ""
      },
      mounted: {
          console.log("comp1的msg:",this.$refs.comp1.msg);
      }
   }
</script>

适用场景:当使用element-ui组件时,可用于调用组件方法,例如el-table组件的选择表格项,排序等等。

v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突。

// App.vue
<add-item v-model="input_val" />
<template>
   <div class="add">
      <input
         :value="value"
         type="text"
         placeholder="What needs to be done?"
         @input="inputVal"
      >
   </div>
</template><script>
   export default {
      name: "AddItem",
      // 如果对应的props字段名不叫value,则需要定义model属性来指定父组件的v-modal绑定的是哪个值
      /*model: {
         prop: "value1",
         event: "input"
      },*/
      props: {
         value: {
            type: String,
            required: true
         }
      },
      methods: {
         inputVal(e) {
            this.$emit("input", e.target.value);
         }
      }
   }
</script>

适用场景:v-model适用于在封装input类型的组件时,用于给数据进行双向绑定,如果不使用v-model,则需要在父组件增加一个方法来监听事件然后改变父组件中的值,显得非常麻烦且不简洁。

Sync修饰符

syncv-model非常类似,也是适用于需要子组件改变父组件的值时。 :isShow.sync="isShow"其实是 @update:isShow="bol=>isShow=bol"语法糖

<template>
    <div>
        <input type="button"
               value="我是父组件中的按钮"
               @click="show">
        <child :isShow.sync="isShow" v-show="isShow"/>
    </div>
</template>
<script>
    import child from "@/components/child"
    export default {
        data() {
            return {
                isShow:false
            }
        },
        components:{
            child
        },
        methods:{
            show(){
                this.isShow=true;
            },
            changeIsShow(bol){
                this.isShow=bol;
            }
        }
    }
</script>
<template>
    <div>
         我是一个子组件,我在红色的海洋里!
        <input type="button" value="点我隐身" @click="upIsShow">
    </div>
</template>
<script>
    export default {
        methods:{
            upIsShow(){
                this.$emit("update:isShow",false);
            }
        }
    }
</script>

provide/inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效。

provide在父组件中将子组件要使用的数据抛出,然后在子组件中inject注入要使用的数据,它不像使用props需要层层传递,中间不需要这个数据的地方也需要声明,provideinject只注重“源头”和“终点”,主要用于在高阶组件库中使用,在平常的开发中一般不适用的原因是不方便追溯“源头”,不知道是哪一层声明的和使用了。

子孙层中的provide会覆盖祖父层中相同key的属性值。

provide 选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的 property。

inject选项应该是一个字符串数组或一个对象,from是选自祖父组件provide的哪个值的key,default指定一个默认值。

// 父组件
provide: ["message"],
    
// 子组件
inject: {
    msg: {
        from: "message",
        default: "default value"
    }
}
// 父组件CompFather
<template>
   <div>
      <comp-son />
   </div>
</template><script>
   import CompSon from "./CompSon";
   export default {
      name: "CompFather",
      components: {CompSon},
      provide: {
         msg: "父组件msg"
      }
   }
</script>
// 子组件 CompSon
<template>
   <div>
      子组件
   </div>
</template><script>
   export default {
      name: "CompSon",
      inject: ["msg"],
      mounted() {
         console.log(this.msg);  // 父组件msg
      }
   }
</script>

provideinject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。例如provideinject的是一个对象时,该数据是可响应的。

// 当provide/inject的是一个对象时,是可响应的,子组件改变值,父组件也会改变,父组件改变子组件也会改变
provide() {
   return {
      msg: this.msg
   }
},
    
data() {
    return {
        msg: {
            title: "父组件msg"
        }
    }
}

适用场景:适用于封装高阶组件,祖先实例不关心哪个后代实例会用到,后代实例不关心数据来源于哪个祖先实例。

非父子组件间的通信

中央事件总线 bus

使用中央事件总线实际就是创建一个vue实例,利用这个vue实例来传递消息。

使用方式一:

// 定义一个bus文件
import Vue from "vue";
const bus = new Vue();
export default bus;
// 引入bus文件
import bus from "@/bus";
bus.$emit("myEvent", "bus msg")
// 引入bus文件
import bus from "@/bus";
bus.$on("myEvent", data => {
    console.log(data);
});

使用方式二:

// main.js
import Vue from 'vue'
import App from './App.vue'Vue.prototype.$bus = new Vue();
​
new Vue({
  render: h => h(App),
}).$mount('#app')
​
// 发送事件
this.$bus.$emit("myEvent", "bus msg");
// 接收事件
this.$bus.$on("myEvent", data => {
    console.log(data);
})

适用场景:适用于不是特别大的单页面应用跨级跨兄弟组件间通信。

VueX

当我们在开发大型但单页应用时,组件间需要频繁使用修改某些值,这时候使用组件间传参就显得非常繁杂混乱,且不利于管理维护,vue为解决这一问题提供了VueX这个状态管理工具,我们只需要将多个组件需要共享的状态放VueX中进行统一管理,形成一个全局单例管理模式,即可实现组件数据同步。

vuex

VueX的将要统一管理的状态放在state中,这样在引用了VueX的页面中就能获取到状态,actions主要是处理例如后台请求的一些异步操作,保证数据的同步,通过dispatch方法调用actions中的方法,当得到异步的数据之后再通过commit调用mutations中的方法改变state。不要在组件中通过$store.state直接修改state数据,这样Devtools是监控不到的,要经过mutations才可以。

这里只是简要介绍通信方式,详细的使用方法参见

[VueX官网]  vuex.vuejs.org/zh/ 

总结

通信方式适用场景
props/$emit直接父子组件传值
$attrs/$listeners$attrs非直接父子组件间传值,$listeners监听原生事件
$children/$parent一般用其它方式代替,不方便维护
ref可用于调用高阶组件方法,如注册element-ui组件引用
v-model封装需要双向绑定的组件时用v-modal进行传参
sync修饰符用于父子组件间,子组件需要改变父组件值时
provide/inject多用于高阶组件库,平常开发一般不使用,不利于代码维护
中央事件总线适用于跨级或兄弟组件间通信。
VueX用于大型单页面中多个组件需要共享同一状态时。