Vue2向Vue3过度核心技术组件通信

---

1 组件基础知识scoped解决样式冲突

1.1 默认情况：

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

1. 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响

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

1.2 代码演示

BaseOne.vue

BaseTwo.vue

App.vue

1.3 scoped原理

1. 当前组件内标签都被添加data-v-hash值 的属性
2. css选择器都被添加 [data-v-hash值] 的属性选择器

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

1.4 总结

1. style的默认样式是作用到哪里的？
2. scoped的作用是什么？
3. style中推不推荐加scoped？

2 组件基础知识data必须是一个函数

2.1 data为什么要写成函数

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

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

2.2 代码演示

BaseCount.vue

App.vue

2.3 总结

data写成函数的目的是什么？

3 组件通信

3.1 什么是组件通信？

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

• 组件的数据是独立的，无法直接访问其他组件的数据。
• 想使用其他组件的数据，就需要组件通信

3.2 组件之间如何通信

思考：

1. 组件之间有哪些关系？
2. 对应的组件通信方案有哪几类？

3.3 组件关系分类

1. 父子关系
2. 非父子关系

3.4 通信解决方案

3.5 父子通信流程

1. 父组件通过 props 将数据传递给子组件
2. 子组件利用 $emit 通知父组件修改更新

3.6 父向子通信代码示例

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

父组件App.vue

子组件Son.vue

父向子传值步骤

1. 给子组件以添加属性的方式传值
2. 子组件内部通过props接收
3. 模板中直接使用 props接收的值

3.7 子向父通信代码示例

子组件利用 $emit 通知父组件，进行修改更新

子向父传值步骤

1. $emit触发事件，给父组件发送消息通知
2. 父组件监听$emit触发的事件
3. 提供处理函数，在函数的性参中获取传过来的参数

3.8 总结

1. 组件关系分类有哪两种
2. 父子组件通信的流程是什么？
   1. 父向子
   2. 子向父

4 什么是props

4.1.Props 定义

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

4.2.Props 作用

向子组件传递数据

4.3.特点

1. 可以 传递 任意数量 的prop
2. 可以 传递 任意类型 的prop

4.4.代码演示

父组件App.vue

子组件UserInfo.vue

5 props校验

5.1.思考

组件的props可以乱传吗

5.2.作用

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

5.3.语法

• 类型校验
• 非空校验
• 默认值
• 自定义校验

5.4.代码演示

App.vue

BaseProgress.vue

6 props校验完整写法

6.1.语法

props: {
  校验的属性名: {
    type: 类型,  // Number String Boolean ...
    required: true, // 是否必填
    default: 默认值, // 默认值
    validator (value) {
      // 自定义校验逻辑
      return 是否通过校验
    }
  }
},

6.2.代码实例

6.3.注意

1.default和required一般不同时写（因为当时必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

7 props&data、单向数据流

7.1.共同点

都可以给组件提供数据

7.2.区别

• data 的数据是自己的 → 随便改
• prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

7.3.单向数据流：

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

7.4.代码演示

App.vue

BaseCount.vue

7.5.口诀

谁的数据谁负责

8 综合案例-组件拆分

8.1.需求说明

• 拆分基础组件
• 渲染待办任务
• 添加任务
• 删除任务
• 底部合计 和 清空功能
• 持久化存储

8.2.拆分基础组件

咱们可以把小黑记事本原有的结构拆成三部分内容：头部（TodoHeader）、列表(TodoMain)、底部(TodoFooter)

9 综合案例-列表渲染

思路分析：

1. 提供数据：提供在公共的父组件 App.vue
2. 通过父传子，将数据传递给TodoMain
3. 利用v-for进行渲染

10 综合案例-添加功能

思路分析：

1. 收集表单数据 v-model
2. 监听时间 （回车+点击 都要进行添加）
3. 子传父，将任务名称传递给父组件App.vue
4. 父组件接受到数据后 进行添加 unshift(自己的数据自己负责)

11 综合案例-删除功能

思路分析：

1. 监听时间（监听删除的点击）携带id
2. 子传父，将删除的id传递给父组件App.vue
3. 进行删除 filter (自己的数据自己负责)

12 综合案例-底部功能及持久化存储

思路分析：

1. 底部合计：父组件传递list到底部组件 —>展示合计
2. 清空功能：监听事件 —> 子组件通知父组件 —>父组件清空
3. 持久化存储：watch监听数据变化，持久化到本地

13 非父子通信-event bus 事件总线

13.1.作用

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

13.2.步骤

1. 创建一个都能访问的事件总线 （空Vue实例）

   import Vue from 'vue'
   const Bus = new Vue()
   export default Bus
   

2. A组件（接受方），监听Bus的 $on事件

   created () {
     Bus.$on('sendMsg', (msg) => {
       this.msg = msg
     })
   }
   

3. B组件（发送方），触发Bus的$emit事件

   Bus.$emit('sendMsg', '这是一个消息')
   

13.3.代码示例

EventBus.js

import Vue from 'vue'
const Bus  =  new Vue()
export default Bus

BaseA.vue(接受方)

BaseB.vue(发送方)

App.vue

13.4.总结

1.非父子组件传值借助什么？

2.什么是事件总线

3.发送方应该调用事件总线的哪个方法

4.接收方应该调用事件总线的哪个方法

5.一个组件发送数据，可不可以被多个组件接收

14 非父子通信-provide&inject

14.1.作用

跨层级共享数据

14.2.场景

14.3.语法

1. 父组件 provide提供数据

export default {
  provide () {
    return {
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}

2.子/孙组件 inject获取数据

export default {
  inject: ['color','userInfo'],
  created () {
    console.log(this.color, this.userInfo)
  }
}

14.4.注意

• provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
• 子/孙组件通过inject获取的数据，不能在自身组件内修改