vue组件通信的总结(vue2为例)

注意:组件通信在你们将来面试的时候出现频率超级高。、

前面基础的时候：组件通信讲了6种？

1.组件通信方式1：props

使用场景:[父子通信]

注意事项：

传递数据类型：
1:可能是函数 -----------实质子组件想给父亲传递数据
2:可能不是函数-----------实质就是父亲给子组件传递数据

书写形式有3种：

1.-数组写法：[“todos”]

2.对象：{type:Array}

3.对象：{type:Array,default:[]}

特殊情况：路由传递props
1:布尔值类型，把路由中params参数映射为组件props数据
2:对象，静态数据，很少用 —例如：
3:函数，可以把路由中params|query参数映射为组件props数据

2.组件通信方式2:自定义事件

​ 适用于场景：子组件给父组件传递数据

$emit $on[简写@]
事件:原生DOM事件----【click|mouseenter…】
事件：自定义事件-----[子给父传递数据]

3.组件通信方式3：全局事件总线$bus

$bus 全局事件总线----【万能】

适用于场景：【万能】

组件实例的原型的原型指向的Vue.prototype

Vue.prototype.$bus=this;

4.组件通信方式4：pubsub-js

【发布与订阅消息】*****在vue中很少用

在【React】中使用的比较多

适用于场景：【万能】

5.组件通信方式5:Vuex[仓库]

-----数据非持久化----万能的

适用于场景：【万能】

核心概念：5
state
mutations
actions
getters
modules

6.组件通信方式6：插槽-----父子通信【结构】

slot

适用场景：父子组件通信------（一般结构）

默认插槽
具名插槽
作用域插槽:子组件的数据来源于父组件，但是子组件的自己的结构有父亲决定。

watch|computed|method区别?
{
name:‘王二麻子’,
eat:function(){

}

}

7:事件相关的深入学习

事件:事件已经学习过两种，第一种原生DOM事件，第二种自定义事件。

​ 系统事件：click，双击，鼠标系列

自定义事件

事件源、事件类型、事件回调

<Event1 @click=“handler1”>

组件标签：event1可以绑定系统事件(不起作用：因为属于自定义事件).native 可以把自定义事件变为Dom事件

组件绑定原生DOM事件，并非原生DOM事件，而是所谓的自定义事件。
如果你想把自定义事件变为原生DOM事件，需要加上修饰符.native修饰
这个修饰符，可以把自定义事件【名字：原生DOM类型的】变为原生DOM事件，

给原生的Dom绑定自定义事件是没有任何意义的，因为没有办法发$emit函数

7:v-model实现组件通信？

【属于组件通信方式的一种】

v-model它是Vue框架中指令，它只要是结合表单元素一起使用【文本框，复选框，单选框等等】

主要的作用就是收集表单数据

v-model：指令，可以收集表单数据【text、radio、checkbox、range】等等
切记：v-model收集checkbox需要用数组收集

v-model:实现原理 value与input事件实现的，而且还需要注意的可以通过v-model实现父子组件数据同步。

:value单向的数据绑定 @input 还可以实现父子数据同步。

​ 原生的DOM当中有oninput事件，它经常结合表单元素一起使用，当表单元素文本内容发生变化时就会触发一次回调

在Vue2中可以通过value和input事件实现v-model功能

​

深入学习v-model：实现父子组件数据同步(实现父子组件通信)

8:属性修饰符.sync，可以实现父子数据同步。

以后在elementUI组件中出现，实现父子数据同步。

:money.sync:第一，父组件给字符串传递props [money]

第二，给当前子组件绑定了一个自定义事件，而且事件名称即为update:money

9：$attrs与$listeners

​ 父子组件通信的一种

$attrs：组件实例的属性，可以获取到父亲传递的props数据（前提子组件没有通过props接受）

对于子组件而言，父组件可以利用props接收，但是需要注意的是，如果子组件通过props接收的属性，在attrs属性当中是获取不到的

例如：可以把父组件传递过来的属性全部加载出来

注意：在上面的使用中v-bind不能换成:使用

小妙招：可以巧妙的利用a标签实现按钮带有提示功能（a标签+element-ui的button）

$listeners：组件实例自身的一个属性，它可以获取到父组件给子组件传递的自定义事件（对象形式呈现）

例如：此处的v-on不可以使用@进行替换

10:$children与$parent

可以实现父子组件通信
ref:可以在父组件内部获取子组件—实现父子通信

解释：ref可以获取真实的DOM节点，当然也可以获取到子组件标签(操作子组件的数据与方法)

在Vue组件当中可以通过ref获取子组件，就可以进行操作子组件数据与方法

**$children:**可以在父组件内部获取全部的子组件【返回数组】

解释：组件实例自身拥有一个属性：$children ,可以获取到当前组件当中全部的子组件，而且放到一个数组里面

注意：尽可能不要使用数组下标的方式进行相应的操作，数组的子组件的顺序你是不确定的

**$parent:**可以在子组件内部获取唯一的父组件【返回组件实例】

解释：需要在子组件的内部获取到父组件，让父组件的数据进行相应的操作，可以通过$parent属性获取到某一个组件的父组件，可以操作父组件的数据和方法

11插槽 ------作用于插槽

插槽：父子组件通信（HTML结构）（通信的是结构）
插槽slot：
默认插槽|具名插槽|作用于插槽

作用域插槽:子组件的数据来源于父组件，但是子组件决定不了自身结构与外观。

12.混入mixin（主要是针对js部分）

​ 如果项目当中出现了许多类似功能，想到组件复用

​ 如果项目当中许多的js业务逻辑相似，想到mixin 【可以把多个组件js重复的，相似的地方整合】

​ 在mixin里面曾经的js的业务逻辑都可以写入：比如mounted钩子，methods，watch等

​ 引入时注意：mixin是以数组的形式引入需要的部分

​ 例如：mixins[myMixin]

第一种:props ----父子
1:父子通信，props只读的
2：写法三种【todos】 {todos：Array} {todos：{type:Arrat,default:[]}}
3：路由props

第二种:自定义事件
1：子给父传递数据
2：两种【简单写法|复杂写法】
<Todos @erha=“handler”>

mounted(){
this.$refs.erha.$on(‘xx’,callBack)
}

3:全局事件总线 —万能

4：pubsub-js------万能

5：vuex------万能

6：v-model

7：.sync

8:$attrs|$listeners

9:$children|$parent ----ref

10插槽 ------作用于插槽
插槽：父子组件通信（HTML结构）
插槽slot：
默认插槽|具名插槽|作用于插槽

作用域插槽:子组件的数据来源于父组件，但是子组件决定不了自身结构与外观。