背景

什么是组件通信

image.png

组件之间的关系

image.png

组件通信解决方案

image.png

概述

• 父子组件通讯
• props详解
• 非父子通信(拓展)- event bus 事件总线
• 非父子通信(拓展)- provide和inject
• v-model详解
• sync修饰符
• ref和$refs获取dom和组件
• Vue异步更新和$nextTick

一、父子通信

image.png

1.1. 父 -> 子

image.png

1.2. 子 -> 父

image.png

二、props详解

2.1. 什么是props

Props定义：组件上 注册的一些自定义属性
Props作用：向子组件传递数据

特点:

• 可以传递任意数量的prop
• 可以传递 任意类型的prop
• 不可修改

2.2. props校验

image.png

三、非父子通信(拓展)- event bus 事件总线

image.png

注意：事件总线使用完，记得使用Bus.$off('sendMsg')销毁事件总线，一般放在beforeDestroy生命周期函数中

四、非父子通信(拓展)- provide & inject

image.png
image.png

五、v-model原理

image.png

5.1. 表单类组件封装

image.png

5.2. v-model 简化代码

原理：v-model本质上是一个语法糖，就是 value属性 和 input事件 的合写。
父组件默认绑定的是input事件，所以子组件只有触发this.$emit('input')才能同步更新v-model绑定值

image.png

六、.sync 修饰符

image.png

七、ref 和 $refs

7.1. 获取dom（组件内更精确）

image.png

7.2. querySelector（查找整个页面）

image.png

7.3. 获取组件实例

image.png

八、Vue异步更新和$nextTick、

image.png image.png

8.1. 总结

image.png