Vue几种组件间的通信

组件间的通信，我的理解就是个组件间的数据传递或方法传递。通信的原则为：不能再子组件中直接修改父组件的状态数据，而是数据在哪，更新数据的行为或函数就定义再哪，记住这一点，掌握组件间通信就变得简单易懂。🤭，此外，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>

以上四种通信方式，各有所长，各有所短，在编码时根据具体要求，选择适合的通信方式，可以让你编码的效率事半功倍，还有，学习，往往伴随着枯燥和无味，若是能够发现其中的乐趣，享受编码的过程，不失为一个成功。😜😎