vue学习----组件通信（面试篇）

本文已参与「新人创作礼」活动．一起开启掘金创作之路

01_为什么要使用组件

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

02_组件基本概念

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

03_组件_基本使用4步

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

04_scoped作用过程

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

05_组件通信_父向子

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

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

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

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

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

08_组件通信_子向父

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

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

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