组件间的通信,我的理解就是个组件间的数据传递或方法传递。通信的原则为:不能再子组件中直接修改父组件的状态数据,而是数据在哪,更新数据的行为或函数就定义再哪,记住这一点,掌握组件间通信就变得简单易懂。🤭,此外,vue组件间的通信方式可归纳为一下几种:
1)props
2)vue的自定义事件
3)消息的订阅和发布
4)slot
5)vuex
方法一:Props
使用props方法传递数据 主要用于父组件向子组件传递数据,首先在父组件定义数据setName,然后在父组件标签中使用:setName = 'setName’将数据传递出去。接着在子组件中使用props:[‘setName’],对数据进行接收,即可实现组件间的数据传递,是一个逐层传递的效果,若要实现三层组件间通信,使用props要逐层传递。其中props接收数据的形式有多种,具体参见下面的例子。
使用组件标签写法:
<my-component name='tom' :age='3' :setName = 'setName'></my-component>
在component定义时声明
1.在组件内声明所有的props
props:['setName']
2.只指定名称
props:['name','age','setName]
3.指定名称和类型
props:{
name:String,
age:Numberm,
setName:Function
}
4.指定名称/类型/必要性/默认值
props:{
name:String,
required:true,
default:xxx
}
👉需要注意的是,props适用于父组件向子组传递数据,所有的标签属性都会成为组件对象的属性,模板页面可以直接引用,但存在的问题是:如果需要向非子后代传递数据必须多层逐层传递,且兄弟组件间不能直接props通信,必须借助父组件才可以。
方法二:vue自定义事件
vue自定义事件,即代替传函数行为,一般两步即可完成:绑定事件监听,触发事件。
绑定事件监听
```bash
//方式一:通过v-on绑定
@delete_list = ‘deleteList’
//方式二:通过#on()
this.$refs.xxx.$on('delete_list',function(list){
this.deleteList(list)
})
触发事件
//触发事件(只能在父组件中接收)
this.$emit(eventName,data)
👉值的注意的是,vue自定义事件是适用于子组件向父组件发送消息(数据),不适用于隔代组件或兄弟组件间通信
方式三:消息订阅于发布(PubSubJs库)
此方式需要安装一个插件:pubsubjs库,其中,订阅消息=绑定事件监听,发布消息=触发事件。
订阅消息
PubSub.subscribe('msg',function(msg,data){})
操作的目标为标签元素,可以添加click、focus事件或回调函数
发布消息
PubSub.publish('msg',data)
操作的目标对象为DOM事件,用户在浏览器上对应的界面上做对应的操作可触发事件。
👉组件通信使用订阅消息方式时,最大的优点是可以实现任意关系组件间的数据通信,冲破了逐层传递的繁琐。
方式四:slot(插槽通信)
不同于前三种通信方式传递的都是数据、方法,slot用于父组件向子组件传递“标签数据”,传递的是一个标签元素。用法如下:
子组件:child.vue
<template>
<div>
<slot name='xxx'>不确定的标签结构</slot>
<div>组件确定的标签结构</div>
<slot name='yyy'>不确定的标签结构</slot>
</div>
</template>
父组件:parent.vue
<child>
<div slot='xxx'>xxx对应的标签结构</div>
<div slot='yyy'>yyy对应的标签结构</div>
</child>
以上四种通信方式,各有所长,各有所短,在编码时根据具体要求,选择适合的通信方式,可以让你编码的效率事半功倍,还有,学习,往往伴随着枯燥和无味,若是能够发现其中的乐趣,享受编码的过程,不失为一个成功。😜😎