vue高级组件通信
一、组件通信高级之自定义事件和原生事件
1.素材准备
- 在src----pages----Communication
- 将组件的路由复制过来,放在路由的重定向上面
2.原生事件和自定义事件概念
- 原生事件:是不需要手动分发的,事件="回调"事件触发,回调函数则自动执行
- 自定义事件:自己定义的,事件="回调"时间需要手动分发,回调才会执行(相对于vue中的组件而言的),组件上使用的是系统的事件,但是没有使用.native修饰,此时该事件仍然是自定义事件,需要手动分发
- DOM中标签里面自己定义的事件,不能直接自动的触发,所以,也不算是自定义事件,需要手动分发
3.v-model指令
- v-model在组件标签中使用的时候,实际上是传入了input事件和value属性
- 可以通过props接收value,和this.$emit分发input事件
4…sync属性修饰符
- 内部绑定的是update自定义事件
- 原理:子集组件接收了.sync前面的动态属性,同时分发了一个update:属性的事件
5.attrs和.$listeners
- attrs是把组件的属性参数通过对象的形式进行传递,除了class和style以及props接收的之外。
- 可以通过this.$attrs接收到对象的值
- 在组件标签上写上v-bind="$attrs"即可接收
- v-bind不能使用简写:的形式,否则会不生效
- this.$attrs使用场景:父级组件调用子级组件的时候,传入的数据个数不确定,传入的事件不确定,但是子级组件依然要可以正常使用
- 如果要向组件传递事件则通过this.$listeners接收
- 在组件标签上写上v-on=this.$listeners接收所有事件
6.children和.$parent以及mxins混合
- $children代表的是所有的子级组件—>
- 通过this.$children.forEach(child=>{child.方法(参数)}即可进行传参
- $parent拿到父级组件的数据
- 通过this.$parent.data中的属性
- mxins对相同的逻辑代码进行抽取和封装,在对应要使用的代码中结构出来即可。mixns也是vue总的一个配置选项
- mxins:[对象名],在data上添加
7.作用于插槽
-
插槽有具名插槽(明明插槽)、作用域插槽、普通插槽
-
普通插槽
-
具名插槽(命名插槽)
-
作用域插槽
-
子级组件中通过传入动态的属性
<solt :row="item" :$index="index" />
-
父级组件通过
`<template v-slot:default="slotProps"> <p>{{slotProps.row.text}}<p/> <template/>`
-
作用域插槽会把template中的所有内容在子级组件中显示出来,实现父子、子父之间的通信。
-
v-slot已废弃。使用slot-scope代替
-
补充:父级传递的数组,插槽内部会自动遍历获取出来,row和$index是固定写法
8.provide和injict
-
provide是一个提供数据的方法,返回一个对象
porvide(){ return{ 通过键值对的形式接收 例: msg11:this.msg1 } }
-
在子级组件中写inject:[‘msg1’]数组的形式传递参数
-
实现父孙之间的通信
9.vue中组件通信总结
- props(父子通信/子父通信)
- 自定义事件和原生事件(父子通信/子父通信)
- 事件总线(任意组件通信)
- PubSub(消息订阅与发布)(任意组件通信)
- Vuex(任意组件通信)
- 插槽(具名插槽(明明插槽)、作用域插槽、普通插槽)
- v-model指令(父子通信/子父通信)
- .sync修饰符(父子通信/子父通信)
- attrs和.$listeners(父子通信/子父通信)
- children和.$parent(父子通信/子父通信)
- provide和injict(任意组件通信)