Vue 核心技术与实战day04

目录

组件的三大组成部分 (结构/样式/逻辑)

 组件的样式冲突 scoped

data 是一个函数

什么是组件通信

不同的组件关系 和 组件通信方案分类

组件通信解决方案：

父子通信流程图：

什么是 prop

props 校验

prop & data、单向数据流

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

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

v-model 原理

表单类组件封装 & v-model 简化代码

.sync 修饰符

ref 和 $refs

Vue异步更新、$nextTick

---

组件的三大组成部分 (结构/样式/逻辑)

 组件的样式冲突 scoped

默认情况 ：写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。

1. 全局样式 : 默认组件中的样式会作用到全局

2. 局部样式 : 可以给组件加上 scoped 属性, 可以让样式只作用于当前组件

scoped原理？

1. 当前组件内标签都被添加 data-v-hash值 的属性

2. css选择器都被添加 [data-v-hash值] 的属性选择器

最终效果: 必须是当前组件的元素 , 才会有这个自定义属性, 才会被这个样式作用到

data 是一个函数

一个组件的 data 选项必须是一个 函数 。→ 保证每个组件实例，维护 独立 的一份数据对象。

每次创建新的组件实例，都会新执行一次 data 函数，得到一个新对象。

什么是组件通信

组件通信, 就是指 组件与组件 之间的 数据传递 。

组件的数据是 独立 的，无法直接访问其他组件的数据。

  想用其他组件的数据 → 组件通信

不同的组件关系 和 组件通信方案分类

组件关系分类：

1. 父子关系

2. 非父子关系

组件通信解决方案：

父子通信流程图：

1. 父组件通过 props 将数据传递给子组件

2. 子组件利用 $emit 通知父组件修改更新

1. 两种组件关系分类 和 对应的组件通信方案

父子关系 → props & $emit

非父子关系 → provide & inject 或 eventbus

通用方案 → vuex

2. 父子通信方案的核心流程

2.1 父传子props：

① 父中给子添加属性传值 ② 子props 接收 ③ 子组件使用

2.2 子传父$emit：

① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数

什么是 prop

Prop 定义： 组件上 注册的一些 自定义属性

Prop 作用：向子组件传递数据

特点：

⚫ 可以 传递 任意数量 的prop

⚫ 可以 传递 任意类型 的prop

props 校验

思考： 组件的 prop 可以乱传么？

作用： 为组件的 prop 指定 验证要求 ，不符合要求，控制台就会有 错误提示 → 帮助开发者，快速发现错误

语法：

① 类型校验

② 非空校验

③ 默认值

④ 自定义校验

prop & data、单向数据流

共同点：都可以给组件提供数据。

区别：

⚫ data 的数据是 自己 的 → 随便改

⚫ prop 的数据是 外部 的 → 不能直接改，要遵循 单向数据流

单向数据流：父级 prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的。

口诀：谁的数据谁负责

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

作用：非父子组件之间，进行简易消息传递。(复杂场景 → Vuex)

1. 创建一个都能访问到的事件总线 (空 Vue 实例) → utils/EventBus.js

2. A 组件(接收方)，监听 Bus 实例 的事件

3. B 组件(发送方)，触发 Bus 实例 的事件

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

provide & inject 作用： 跨层级 共享数据。

1. 父组件 provide 提供数据

2. 子/孙组件 inject 取值使用

v-model 原理

原理： v-model本质上是一个 语法糖 。例如应用在 输入框上，就是 value属性 和 input事件 的合写。

作用： 提供数据的双向绑定

① 数据变，视图跟着变 :value

② 视图变，数据跟着变 @input

注意： $event 用于在模板中，获取事件的形参

表单类组件封装 & v-model 简化代码

1. 表单类组件 封装 → 实现 子组件 和 父组件数据 的 双向绑定

① 父传子： 数据 应该是父组件 props 传递 过来的， 拆解 v-model 绑定数据

② 子传父： 监听输入，子传父传值给父组件修改

2. 父组件 v-model 简化代码， 实现 子组件 和 父组件数据 双向绑定

① 子组件中：props 通过 value 接收 ，事件触发 input

② 父组件中： v-model 给组件直接绑数据 ( :value + @input )

.sync 修饰符

作用： 可以实现 子组件 与 父组件数据 的 双向绑定 ，简化代码

特点： prop属性名，可以 自定义 ，非固定为 value

场景： 封装弹框类的基础组件， visible属性 true显示 false隐藏

本质： 就是 :属性名 和 @update:属性名 合写

ref 和 $refs

作用： 利用 ref 和 $refs 可以用于 获取 dom 元素, 或 组件实例

特点： 查找范围 → 当前组件内 (更精确稳定)

① 获取 dom：

1. 目标标签 – 添加 ref 属性

2. 恰当时机, 通过 this.$refs.xxx, 获取目标标签

② 获取组件：

1. 目标组件 – 添加 ref 属性

2. 恰当时机, 通过 this.$refs.xxx, 获取目标组件，

就可以 调用组件对象里面的方法

Vue异步更新、$nextTick

需求：编辑标题, 编辑框自动聚焦

1. 点击编辑，显示编辑框

2. 让编辑框， 立刻获取焦点

问题："显示之后"，立刻获取焦点是不能成功的！

原因： Vue 是 异步更新 DOM (提升性能)

$nextTick： 等 DOM 更新后 , 才会触发执行此方法里的函数体

语法: this.$nextTick(函数体)

1. Vue是异步更新 DOM 的

2. 想要在 DOM 更新完成之后做某件事，可以使用 $nextTick