Vue组件间的通信

阳光穿透心脏的1/2处 2022-05-14 10:44 275阅读 0赞

Vue组件间的通信，大致分为以下几种：

**  1. 使用props属性。**

props主要用于父组件传递数据给子组件，是你可以在组件上注册一些自定义特性。当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性。这样在子组件就可以使用该该值。请注意：所有的prop都使得期父子prop之间形成了一个**单向下行绑定**，即父级prop的更新会向下流动到子组件，但是反过来就不行，子组件不能改变父组件的状态。

每次父组件发生更新时，子组件中所有的prop都会被刷新为最新的值。

在实例中演示如下：

![70][]，

在父组件中引用 TodoList组件，使用 :todos  (v-bind:todos)传递一个数组，使用 :deleteTodo 传递一个函数，

![70 1][]

子组件中使用props接收传入的参数，然后在本组件使用。无需再data中定义。 当传递函数给子组件，也就意味着， 子组件需要修改父组件的某一项值，但是无法自己修改，只能将 特定值(例如数组的某个角标 )传递或者不传参给父组件，通知父组件进行更新操作(例如删除 数组中的一个元素)。

**  2. 使用Vue自定义事件。**

怎么使用呢？

1.  父组件可以在使用子组件的地方直接用 v-on来监听子组件触发的事件 。即父组件中使用 v-on绑定自定义事件，然后在子组件中使用 $emit(eventName,data)触发事件。使用如下所示：

![70 2][]

addTodo是一个函数，函数的具体内容不再展示了， 在子组件通过$emit 来触发该事件。

![70 3][]

请注意： 该方式，仅仅用于父子组件传递，不适用于 三层及其以上

2.  每个Vue对象实例都实现了事件接口，所以可以使用 $on(eventName)监听事件，使用$emit 来触发事件.

![70 4][]

父组件挂载的时候，为该子组件绑定监听事件：  
 ![70 5][]

子组件中还是通过 $emit 来触发事件。

**3. 消息订阅与发布(PubSubJS库)**

订阅消息 PubSub.subscribe('msg',function(msg,data)\{\} )

发布消息 ： PubSub.publish('msg',data)

注意：先要导入 PubSub组件   import PubSub from ‘pubsub-js’

// 订阅消息   
    //PubSub.subscribe('deleteTodo',function(msg,data){ 
     //     this.deleteTodo(index) ; // 这样是存在问题的，是因为this使用的是回调函数中的，并不是外部的this ，于是，可以使用箭头函数，将外部this绑定
    //})
    PubSub.subscribe('deleteTodo', (msg,data) =>{// 箭头函数，绑定的是外部的this
      this.deleteTodo(index); 
    })

在另一组件中发布消息：

// 注意先导入 PubSub
    
    PubSub.publish('deleteTodo',index) // indx 为传入的数据

注意： 1）优点：此方式可实现任意关系组件间通信(数据)

**4. 组件间通信：Slot **

此方式用于父组件向子组件传递"标签数据"。也即子组件先有一个"占位符", 等待父组件传入具体的标签，子组件在进行渲染。

用法：

子组件：

// 子组件  ：Child.vue
    <template>
       <div>
          <slot name="xxx"> 不确定的标签结构1</slot> 
          <div> 组件确定的标签结构</div>
          <slot name="yyy">不确定的标签结构2</slot>
       </div>
    </template>

父组件：

// 父组件：Parent.vue
    <child>
       <div slot="xxx">xxx对应的标签结构</div> 
    <div slot="yyy">yyy对应的标签结构</div> 
    </child>

注意： 因为传递的具体的标签是在父组件，所以操作也应该放在父组件中。也就是说应该在父组件运行好之后传入子组件，其所有的操作应该在父组件中进行。

如下所示，对子组件的这些操作，全部放入到父组件中：

![70 6][]

5. vuex通信 ，暂时还没有掌握具体用法。请等待后续。。。。。

[70]: /images/20220514/454a12d31f4b4f6d971555f17a737614.png
[70 1]: /images/20220514/4bbd435f6e5145b4aa74eefe8bda435e.png
[70 2]: /images/20220514/bd6115d48bdb499891e6ec692508131a.png
[70 3]: /images/20220514/6f29186f67214bf1b060d8f410ecc65d.png
[70 4]: /images/20220514/0b0f86a3ec6f46b8bab302c571b673ec.png
[70 5]: /images/20220514/a17cb47f36a2408084d95a339419e0dc.png
[70 6]: /images/20220514/0b1041de81c1442f90b1acfdde8bb115.png