Vue组件间的通信,大致分为以下几种:

  1. 使用props属性。

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

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

在实例中演示如下: 

 

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

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

  2. 使用Vue自定义事件。

 怎么使用呢?

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

   

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

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

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

 父组件挂载的时候,为该子组件绑定监听事件:
 

子组件中还是通过 $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>

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

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

 

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

Logo

前往低代码交流专区

更多推荐