vue高级组件通信

vue高级组件通信

一、组件通信高级之自定义事件和原生事件

1.素材准备

1. 在src----pages----Communication
2. 将组件的路由复制过来，放在路由的重定向上面

2.原生事件和自定义事件概念

1. 原生事件：是不需要手动分发的，事件="回调"事件触发，回调函数则自动执行
2. 自定义事件：自己定义的，事件="回调"时间需要手动分发，回调才会执行（相对于vue中的组件而言的），组件上使用的是系统的事件，但是没有使用.native修饰，此时该事件仍然是自定义事件，需要手动分发
3. DOM中标签里面自己定义的事件，不能直接自动的触发，所以，也不算是自定义事件，需要手动分发

3.v-model指令

1. v-model在组件标签中使用的时候，实际上是传入了input事件和value属性
2. 可以通过props接收value，和this.$emit分发input事件

4…sync属性修饰符

1. 内部绑定的是update自定义事件
2. 原理：子集组件接收了.sync前面的动态属性，同时分发了一个update：属性的事件

5.attrs和.$listeners

1. attrs是把组件的属性参数通过对象的形式进行传递，除了class和style以及props接收的之外。
2. 可以通过this.$attrs接收到对象的值
3. 在组件标签上写上v-bind="$attrs"即可接收
4. v-bind不能使用简写:的形式，否则会不生效
5. this.$attrs使用场景：父级组件调用子级组件的时候，传入的数据个数不确定，传入的事件不确定，但是子级组件依然要可以正常使用
6. 如果要向组件传递事件则通过this.$listeners接收
7. 在组件标签上写上v-on=this.$listeners接收所有事件

6.children和.$parent以及mxins混合

1. $children代表的是所有的子级组件—>
2. 通过this.$children.forEach（child=>{child.方法（参数）}即可进行传参
3. $parent拿到父级组件的数据
4. 通过this.$parent.data中的属性
5. mxins对相同的逻辑代码进行抽取和封装，在对应要使用的代码中结构出来即可。mixns也是vue总的一个配置选项
6. mxins:[对象名]，在data上添加

7.作用于插槽

1. 插槽有具名插槽（明明插槽）、作用域插槽、普通插槽

2. 普通插槽

3. 具名插槽(命名插槽)

4. 作用域插槽

5. 子级组件中通过传入动态的属性
   <solt :row="item" :$index="index" />

6. 父级组件通过

   `<template v-slot:default="slotProps">
   <p>{{slotProps.row.text}}<p/>
   <template/>`
   

7. 作用域插槽会把template中的所有内容在子级组件中显示出来，实现父子、子父之间的通信。

8. v-slot已废弃。使用slot-scope代替

9. 补充：父级传递的数组，插槽内部会自动遍历获取出来，row和$index是固定写法

8.provide和injict

1. provide是一个提供数据的方法，返回一个对象

   porvide(){
   	return{
   	通过键值对的形式接收
   	例：
   	msg11:this.msg1
   	}
   }
   

2. 在子级组件中写inject:[‘msg1’]数组的形式传递参数

3. 实现父孙之间的通信

9.vue中组件通信总结

1. props（父子通信/子父通信）
2. 自定义事件和原生事件（父子通信/子父通信）
3. 事件总线（任意组件通信）
4. PubSub(消息订阅与发布)（任意组件通信）
5. Vuex（任意组件通信）
6. 插槽（具名插槽（明明插槽）、作用域插槽、普通插槽）
7. v-model指令（父子通信/子父通信）
8. .sync修饰符（父子通信/子父通信）
9. attrs和.$listeners（父子通信/子父通信）
10. children和.$parent（父子通信/子父通信）
11. provide和injict（任意组件通信）