Vue 组件间通信有哪几种方式

最新推荐文章于 2024-01-18 13:40:03 发布

喵喵喵miao～

最新推荐文章于 2024-01-18 13:40:03 发布

阅读量1.9k

点赞数 3

文章标签： vue.js javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/XiongFine/article/details/129518274

版权

Vue 组件间通信主要指以下 3 类通信：父子组件通信、隔代组件通信、兄弟组件通信

1.props / $emit 适用父子组件通信

props是父组件将值传给子组件，$emit是子组件通过派发事件的方式将值传给父组件

2.ref 与 $parent / $children 适用父子组件通信

1）ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

2）`$parent / $children` ：访问父、子实实例，需要注意的是：

children是一个数组，因为子组件可能有多个，通过parent和$children可以直接修改父子组件的data

`Parent.vue`

<Child />
<Child />
<Child />

{
   data(){
     return {
       parentMsg:'parent'
     }
   },
  mounted(){
   this.$children[0].childMsg = 'changed'
  }
}

`Child`

{
   data(){
     return {
       childMsg:'child'
     }
   },
   mounted(){
     this.$parent.parentMsg = 'changed'
   }
}

3.EventBus ($emit/$on) 适用于父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件：

使用EventBus我们需要实例化一个空的不具备DOM的Vue，为方便使用，可以把其挂在项目将实例的Vue的原型上

`main.js`

Vue.prototype.$EventBus = new Vue()

`CompnentA`

{
   methods:{
     testA(){
       this.$EventBus.$emit('cmaFunction',params)
     }
   }
}

`ComponentB`

{
   mounted(){
     this.$EventBus.$on('cmaFunction',(params)=>{
       console.log(params)
     })
   }
}

4.$attrs/$listeners 适用于隔代组件通信

- attr包含了父作用域中不作为prop被识别(且获取)的特性绑定(class和style除外),并且可以通过v−bind="attrs"继续向下传递,通常配合 inheritAttrs 选项一起使用(inheritAttrs=true的时候，传递的属性会加到子组件的根元素上)

例如：

`Parent.vue`

<Child name="jack" age="18" weight="135">

`Child.vue`

/可以将$attrs继续传向后代组件
<GrandSon v-bind="$attrs">
{
   props:['weight'],
   mounted(){
   //这里'weight'已经被作为props识别了，所以¥attrs上不再包含weight属性
     console.log(this.$attrs) // {name:'jack',age:'18'}
   }
}

`GrandSon.vue`

{
   mounted(){
     console.log(this.$attrs)  //{name:'jack',age:'18'}
   }
}

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

例如：

`Parent.vue`

<Child v-on:click="myClick">

`Child.vue`

//可以将$attrs继续传向后代组件
<GrandSon v-bind="$listeners">
{
   mounted(){
     console.log(this.$listeners) // {name:'jack',age:'18'}
   }
}

`GrandSon.vue`

{
   mounted(){
     console.log(this.$listeners)  //{name:'jack',age:'18'}
   }
}

5.provide / inject 适用于隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

`Parent.vue`

{
    provide:{
        foo:'bar'
    }
}

`GrandSon.vue`

{
    inject:['foo'],
    mounted(){
        console.log(this.foo) // bar
    }
}