Vue组件间的通信
Vue组件间的通信,大致分为以下几种: 1. 使用props属性。 props主要用于父组件传递数据给子组件,是你可以在组件上注册一些自定义特性。当一个值传递给一个prop特性的时候,它就变成了那个组件实例的一个属性。这样在子组件就可以使用该该值。请注意:所有的prop都使得期父子prop之间形成了一个单向下行绑定,即父级prop的更新会向下流动到子组件,但是反过来就不行,子组件不能改...
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通信 ,暂时还没有掌握具体用法。请等待后续。。。。。
更多推荐
所有评论(0)