Vue通信组件核心问题

引言

上一篇文章地址：Vue组件通信基础
承接上一篇文章，这次讲解了Vue组件通信基础的一些核心问题

01_为什么要使用组件

问题

  1. 遇到重复标签想复用?
  2. 组件好处?

答案

  1. 遇到重复标签想复用?
    1. 封装成组件
  2. 组件好处?
    1. 各自独立, 便于复用

02_组件基本概念

问题

  1. 组件是什么?
  2. 什么时候封装组件?
  3. 组件好处?

答案

  1. 组件是什么?
    1. 可复用的vue实例, 封装标签, 样式, JS
  2. 什么时候封装组件?
    1. 遇到重复标签, 可复用的时候
  3. 组件好处?
    1. 各自独立, 互不影响

03_组件_基本使用4步

问题

  1. 创建和使用组件步骤?
  2. 组件运行结果?

答案

  1. 创建和使用组件步骤?
    1. 创建.vue文件–标签–样式–JS进去
    2. 导入组件(import xxx from ‘path/to/components/xxx.vue’)
    3. 注册组件(全局/ 局部)
    4. 使用组件(组件名用作标签)
  2. 组件运行结果?
    1. 把组件标签最终替换成, 封装的组件内标签

==练习时间：5m==

04_scoped作用过程

问题

  1. Vue组件内样式, 只针对当前组件内标签生效如何做?
  2. 原理和过程是什么?

答案

  1. Vue组件内样式, 只针对当前组件内标签生效如何做?
    1. 给style上添加scoped
  2. 原理和过程是什么?
    1. 会自动给标签添加data-v-hash值属性, 所有选择都带属性选择

05_组件通信_父向子

问题

  1. 什么时候需要父传子技术?
  2. 父传子口诀(步骤)是什么?

答案

  1. 什么时候需要父传子技术?
    1. 从一个vue组件里把值传给另一个vue组件(父->子)
  2. 父传子口诀(步骤)是什么?
    1. 子组件内, props定义变量, 在子组件使用变量
    2. 父组件内, 使用子组件, 属性方式给props变量传值

06_组件通信_父向子_配合循环

问题

  1. 循环使用组件注意事项?

答案

  1. 循环使用组件注意事项?
    1. 每次循环, 变量和组件, 都是独立的

==练习时间：3m==

07_组件通信_单向数据流

问题

  1. 为何不建议, 子组件修改父组件传过来的值?
  2. 什么是单向数据流?
  3. props里定义的变量能修改吗?

答案

  1. 为何不建议, 子组件修改父组件传过来的值?
    1. 父子数据不一致, 而且子组件是依赖父传入的值
  2. 什么是单向数据流?
    1. 从父到子的数据流向, 叫单向数据流
  3. props里定义的变量能修改吗?
    1. 不能, props里的变量本身是只读的

08_组件通信_子向父

问题

  1. 什么时候使用子传父技术?
  2. 子传父如何实现?

答案

  1. 什么时候使用子传父技术?
    1. 当子想要去改变父里的数据
  2. 子传父如何实现?
    1. 父组件内, 给组件@自定义事件=”父methods函数”
    2. 子组件内, 恰当时机this.$emit(‘自定义事件名’, 值)

==练习时间：3m==

09_组件通信_跨组件传值

问题

  1. 什么时候使用eventBus技术?
  2. eventBus技术本质是什么?

答案

  1. 什么时候使用eventBus技术?
    1. 当2个没有引用关系的组件之间要通信传值
  2. eventBus技术本质是什么?
    1. 空白Vue对象, 只负责$on和$emit

==练习时间：5m==

10_todo案例_项目创建_静态页面准备

问题

  1. 涉及到了哪些技术点?

答案

  1. 涉及到了哪些技术点?
    1. 组件创建
    2. 组件引入
    3. 组件注册
    4. 组件使用

==练习时间：30s（输入命令初始化项目）==

11_todo案例_铺设待办任务

问题

  1. 涉及到了哪些技术点?

答案

  1. 涉及到了哪些技术点?
    1. 父传子技术
    2. v-for循环
    3. v-model绑定
    4. 动态class使用

==练习时间：3m==

12_todo案例_添加任务

问题

  1. 涉及到了哪些技术点?

答案

  1. 涉及到了哪些技术点?
    1. 键盘事件, enter修饰符
    2. 子传父技术

==练习时间：3m==

13_todo案例_删除任务

问题

  1. 涉及到了哪些技术点?

答案

  1. 涉及到了哪些技术点?
    1. 点击事件, 传索引
    2. 子传父
    3. 数组删除某个元素, v-for更新

==练习时间：3m==

14_todo案例_统计任务数量

问题

  1. 涉及到了哪些技术点?

答案

  1. 涉及到了哪些技术点?
    1. 父传子
    2. 计算属性
    3. 数组更新 – 所有地方受影响

==练习时间：3m==

15_todo案例_筛选显示任务

问题

  1. 涉及到了哪些技术点?

答案

  1. 涉及到了哪些技术点?
    1. 动态class – 配合判断
    2. 子传父技术
    3. 计算属性 + 数组过滤方法

==练习时间：3m==

16_todo案例_清除已完成

问题

  1. 涉及到了哪些技术点?

答案

  1. 涉及到了哪些技术点?
    1. 子传父技术
    2. 数组过滤方法

==练习时间：3m==

17_todo案例_数据缓存

问题

  1. 涉及到了哪些技术点?

答案

  1. 涉及到了哪些技术点?
    1. 深度侦听
    2. 数据缓存
    3. 序列化和反序列化

==练习时间：3m==

18_todo案例_全选

问题

  1. 涉及到了哪些技术点?

答案

  1. 涉及到了哪些技术点?
    1. 计算属性完整写法
    2. every方法如果不遍历返回true

==练习时间：3m==