Vue组件通信百科

Vue组件通信方法很多同学会说我知道，这个简单，props传值，$emit返回，不行就用vuex。但实际上，vue组件的通信远不止于此。层级很多的时候没必要用vuex。一个项目需要在每个级别传递几个静态参数。如果你说我用vuex，我觉得这是杀鸡用牛刀，今天就来说说有多少种方法，如何应用。组件通信方式列举组件通信的常用方法1.props/$emit。2.事件。3.vuex。自定义事件1.边界情况4.$parent.5.$根。6.$孩子。7.$参考。8.提供/注入。2.非道具功能9.$attrs。10.$听众。组件通信的应用1.props/$emitprops传值很简单，这个是最常用的，我简单写下例子。父组件传值给子组件//父组件//子组件通过props获取msgprops:{msg:String}子组件传值给父组件，使用$emit//调用child中的$emit，第一个参数是方法名，后面是参数this.$emit('add',good)//parent,$emit会触发父组件的add方法2.前面提到的eventbus中的props与/$emit父子组件通信。它们在导入和被引入之间存在关系。如果没有这种关系怎么办？这时候我们往往会使用事件总线或者vuex的方式。首先在main.js文件中，通过vue的prototype属性初始化了EventBus，初始化了一个全局的事件总线。importVuefrom'vue'importAppfrom'./App.vue'//事件总线Vue.prototype.$bus=newVue()newVue({render:h=>h(App),}).$mount('#app')在组件1中发送信息//使用事件总线发送事件this.$bus.$emit('event-from-component1','somemsgfromcomponent1')在组件2中监听接收信息这.$bus.$on('event-from-component1',msg=>{console.log('component2:',msg);});这时候只要在组件1中触发了$bus.$emit方法，就会调用组件2中的$bus.$on方法，控制台会输出：3.Vuex创建了一个唯一的全局数据管理器存储，它通过它管理数据并通知组件状态更改。vuex的强大就不在这里赘述了。Vuex的内容很多，不是本文的主题。$parent的兄弟组件可以通过共同的祖先直接桥接联通，$parent和$root都可以。//Brother1发出方法this.$parent.$emit('event-from-brother1','somemsgfrombrother1')`//Brother2接收方法this.$parent.$on('event-from-brother1',msg=>{console.log('brother2:',msg);});这时触发brother1中的方法，控制台会显示：Thisisthemethodofcommunicationbetweenbrothercomponents。我们也可以通过$parent从子组件调用父组件的方法。//parent中的方法定义了一个方法methods:{fatherMethod(){console.log('Iamyourfather');}}//children子组件调用父组件方法this.$parent.fatherMethod()当$调用子组件时parent.fatherMethod()方法会在控制台显示：我是你爸爸5.$root$root和上面的parent类似，这里不再赘述，详见官网。6.$children父组件可以通过$children访问子组件，实现父子通信，但是父组件可能包含多个子组件，所以需要区分this.$children[index].xx='xxx'但是有一点需要注意，$children子元素的顺序实际上并不能保证，也不是响应式的。因为$children是根据你的页面加载组件的顺序来决定子组件在$children数组中的顺序的。如果组件A先于组件B加载，那么组件A的下标为0，组件B的下标为1。动态组件容易出错，不推荐。但是，我们常用的$refs可以解决这个问题。7、$refs返回节点引用，也就是获取dom//将引入dom中//获取上面div的dom来操作this.$refs.tx调用在父组件方法中通过ref调用子组件，这里就不会有$children的顺序问题，因为ref是一一对应的。//父组件//子组件方法：{sendToChild1(){console.log('我是父组件使用ref调用的方法')}},//在父组件中调用子组件方法sendToChild1`this.$refs.child2.sendToChild1()`8.provide/inject可以很好的跨层级通信。官网也做了更详细的说明：https://cn.vuejs.org/v2/api/#...。这个方法其实很好用，但是很多同学没有用过，可能不是很清楚。下面详细说说：//祖先组件中提供了一个变量。这个时候我们使用provide方法注入provide(){return{father:'father'}},//这个时候我们需要在一个后代元素中获取这个father变量//注入之后就可以了在这个后代组件中使用变量fatherinject:['father']//另一种写法//这时候我们需要重命名变量，同时设置默认值inject:{bar1:{from:'father',default:'barrrrrrrr'}}，我们也可以将注入的值放到我们后代元素的数据中使用，provide/inject的基本用法是这样的。9.$attrs$attrs包含在父作用域中不被识别（和获取）为props的属性绑定（类和样式除外）。当一个组件没有声明任何props时，所有的父作用域绑定（除了class和style）都会被包含在这里，内部组件可以通过v-bind="$attrs"传入——在创建高级组件时非常有用。//向祖父组件中的父组件注入信息//父组件，我们需要在父组件中绑定$attr，以便孙子组件可以获取信息//孙子组件：props中没有声明msg，子组件仍然可以接收信息