Vue组件的通信方式理解

阿辰N
434 阅读4分钟

1.父向子通信:props数据传递

子组件声明接收属性三种写法:

  1. 数组形式【‘todos’】
  2. 对象的形式 限制数据类型{ todos:Array}
  3. 限制类型以及传递默认值{ todos:{type:Array,default:[]}}

2.子向父通信

  1. props函数数据传值:与props传递数据比较相似,通过方法最终传递出来数据.
  2. 自定义事件:子组件通过$emit去分发事件与传递数据,父组件去进行接收与处理
  3. 特别注意点:一定注意看@xxx事件 是原生的DOM事件还是自定义事件 原生的DOM事件 里面默认就已经传递了一个event参数 而自定义事件需要自已进行传递

常用的原生DOM事件:onclick:点击事件 onmousedown:鼠标按下事件 onkeydown：键 盘按下事件 onkeyup：键盘松开事件等

DOM事件 作用在html标签上就是DOM事件的触发 作用在组件标签上 就是自定义事件 如果想要DOM事件作用在组件身上也是同样的效果 那么需要添加.native修饰符

event的深入理解.png

event的方法截图.png

event理解的输出结果.png

3.父子组件通信实现数据同步

3.1 v-model的理解

  1. v-model的理解:v-model一般都会使用在表单类元素身上,实现数据的双向绑定
  2. 在html标签中:先进行单项数据流采用props的数据进行传递 内部再去实现一个input 事件,input事件的实现,内部会通过$event.target.value 去获取表单类元素的值 这里特别注意:传递的数据一定是表单类的value值 @input是对表单项输入事件的一个监听

3.在组件标签中:<子组件名 :value="msg" @input="input"> A组件中运用props传参 把value传递给子组件 子组件内部去接收 父组件给子组件添加了一个自定义事件 这个自定义事件需要子组件去进行触发 子组件触发了input自定义事件

把在子组件内表单内修改的值 通过@input(原生的Dom事件)对输入项的一个监听获取修改的值,再通过自定义事件(把表单项中修改的值)传递给父组件

特别注意区分:在子组件内的自定义事件 还是原生的Dom事件 总结 父子之间 最终达到数据同步的效果 props与自定义事件的组合 v-model一般使用在子组件内有表单类元素使用的情况

v-model的理解.png 原始输出 v-model原始输出.png 修改输出

v-model修改后续输出.png

3.2.sync修饰符的理解

实现父子数据同步 父向子传递数据的时候 还要分清传递的是基本数据类型 还是对象数据类型 子组件内部无法自己主动去修改传递过去的数据 只能通过自定义事件 传递给父组件新的数据,所以一般传递的是基本数据类型 父组件的数据发生改变后 再重新传递给子组件 通知父亲 实现父子数据同步去进行修改 与v-model实现的效果一致

完整写法 : 利用props传值与自定义事件的结合 <子组件名:money="money" @update:money="money=$event"> 自定义事件名一定为update:xxx 同时注意 这个组件去进行传值的时候与input不同 属性名可以随意命名

简写形式使用.sync修饰符 <子组件名 :money.sync="money">

v-model的写法: <子组件名 v-model="money"> 一旦使用v-model的复杂写法, 一定注意数据名一定要为value <子组件名 :value="money" @input="money=$event" >

4.全局组件通信

4.1全局事件总线

适用场合:所有组件都可以进行通信

整个流程解析 1、安装总线 在main.js中 new vue内部 在Vue的原型上添加bus 在创建之前 beforeCreate() {Vue.prototype.bus = this }

2、在接收数据的组件对象当中 获取总线给总线绑定自定义事件 this.$bus.$on 回调函数留在哪 就是对应的数据方与接收方

3、在发送数据的组件对象当中 获取总线触发总线身上绑定的自定义事件 this.$bus.$emit 发送方

5.插槽的理解

插槽的本质：数据是在父组件当中存在的 ，而数据需要父组件传递给子组件在子组件内部去进行显示的

展示的过程中 展示的结构由父组件决定 不是由子组件决定的 数据会由子组件再去回传给父组件 插槽有三种形式 :默认插槽 具名插槽 作用域插槽

  1. 默认插槽:父组件在子组件内部没有写任何内容 只是单纯地引用了子组件 那么数据就依然以子组件内部的数据结构展示为主
  2. 具名插槽：子组件在获取数据后 进行遍历数据遍历展示的时候在slot内部去用name属性 给具名插槽命名 父组件用模板去接收展示的时候 用name属性精确定位这个插槽显示的结构位置
  3. 作用域插槽：子组件回传传递给父组件的额外属性都在这里slot-scope这里可以获取 template slot-scope="{xxx}" slot-scope的本质是一个对象 这里可以利用解构的方式把数据全部都解构处理 再去父组件内部模板去进行展示 父组件的内容如下 todos是一组数组类型的数据 父组件的插槽内容.png 子组件的内容如下

插槽的子组件.png

6.vuex的理解

vuex vuex是一个专为vue.js应用程序开发的状态管理模式（它采用集中式存贮管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化）。

　vuex五大核心属性：state，getter，mutation，action，module

  1. state：存储数据，存储状态； 在根实例中注册了store 后用 this.$store.state 来访问；对应vue里面的data；存放数据方式为响应式，vue组件从store中读取数据，如数据发生变化，组件也会对应的更新。
  2. getter：可以认为是 store 的计算属性，它的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
  3. mutation：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
  4. action：包含任意异步操作，通过提交 mutation 间接更变状态。
  5. module：将 store 分割成模块，每个模块都具有state、mutation、action、getter、甚至是嵌套子模块。特别注意因为项目里面集成了多个页面的数据,如果全部放入在一个state里面的话,那么数据可能会造成重名,数据集太过于庞大.

7.$attrs和$linsteners的使用理解

本质:父向子传递属性数据和事件数据用的 根据已有的组件 以原有的为基础 封装自己的组件 利用组件间通信 传递动态属性 组件标签的属性会传递到内部去 $attrs是 接收父组件传送过来的除子组件props已经接收的属性和class属性之外的属性 $linsteners是 接收父组件传送过来的事件 运用到了v-bind与v-on的高级用法 不能进行简写

8.ref的使用

通过给子组件添加ref属性 在父组件内进行相对应的操作时 可以通过 this.$refs.xx去获取到子组件内部的数据以及方法 xx是在子组件内部定义的ref的属性值 可以直接在父组件内获取去进行相对应的操作

补充:还有订阅与消息发布等等 文章内附了部分截图 还有几种方式要去项目里具体演练 大佬勿喷 欢迎大家评论补充 指出错误及时修改!

avatar
文章
阅读
粉丝