Vue2.x核心技术与实战(三)
目录
四、Vue2.x：组件通信&进阶用法
4.1 组件的三大组成部分(结构/样式/逻辑)
4.1.0 组件的三大组成部分-注意点说明
4.1.1 组件的样式冲突 scoped
4.1.2 data是一个函数
4.2 组件通信
4.2.1 什么是组件通信
4.2.2 不同的组件关系和组件通信方案分类
4.2.2 父传子
4.2.3 子传父
什么是 prop
props 校验
prop & data、单向数据流
4.2.4 非父子通信(拓展)
event bus 事件总线
provide & inject
4.3 综合案例：小黑记事本(组件版)
4.3.1 拆分基础组件
4.3.2 渲染待办任务
4.3.3 添加任务
4.3.4 删除任务
4.3.5 底部合计和清空功能
4.3.6 持久化存储
4.4 进阶语法
4.4.1 v-model原理
4.4.2 表单类组件封装 & v-model 简化代码
4.4.3 .sync修饰符
4.4.4 ref和$refs
① 获取dom：
② 获取组件：
4.4.5 Vue异步更新、$nextTick
四、Vue2.x：组件通信&进阶用法
4.1 组件的三大组成部分(结构/样式/逻辑)
4.1.0 组件的三大组成部分-注意点说明
4.1.1 组件的样式冲突 scoped
默认情况：写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
- 全局样式：默认组件中的样式会作用到全局
- 局部样式：可以给组件加上 scoped 属性，可以让样式只作用于当前组件
scoped原理?
- 当前组件内标签都被添加data-v-hash值的属性
- css选择器都被添加[data-v-hash值]的属性选择器
最终效果：必须是当前组件的元素，才会有这个自定义属性，才会被这个样式作用到
4.1.2 data是一个函数
一个组件的 data 选项必须是一个函数。→ 保证每个组件实例，维护独立的一份数据对象。
每次创建新的组件实例，都会新执行一次data函数，得到一个新对象。
总结：
组件三大组成部分的注意点：
- 结构：有且只能一个根元素
- 样式：默认全局样式，加上scoped局部样式
- 逻辑：data是一个函数，保证数据独立。
4.2 组件通信
4.2.1 什么是组件通信
组件通信，就是指组件与组件之间的数据传递。
- 组件的数据是独立的，无法直接访问其他组件的数据。
- 想用其他组件的数据 → 组件通信
4.2.2 不同的组件关系和组件通信方案分类
组件关系分类：
- 父子关系
- 非父子关系
组件通信解决方案：
父子通信流程图：
- 父组件通过 props 将数据传递给子组件
- 子组件利用 $emit 通知父组件修改更新
4.2.2 父传子
父组件通过 props 将数据传递给子组件
4.2.3 子传父
子组件利用 $emit 通知父组件，进行修改更新
总结：
1. 两种组件关系分类和对应的组件通信方案
- 父子关系 → props & $emit
- 非父子关系 → provide & inject 或 eventbus
- 通用方案 → vuex
2. 父子通信方案的核心流程
2.1 父传子props：
① 父中给子添加属性传值 ② 子props接收 ③ 子组件使用
2.2 子传父$emit：
① 子$emit发送消息 ② 父中给子添加消息监听 ③ 父中实现处理函数
什么是 prop
prop定义：