组件
组件化的意义：封装（复用，把逻辑隐藏起来，提高可维护性），快速开发（搭积木）
约定：我们通常把那些除了HTML标签以外的自定义组件，才称为‘组件’，结论是，我们说“父组件”“子组件”指的是
- 本质：就是HTML的扩展。结论：我们在使用组件时，要把它当成HTML一样的感觉来使用
- 定义一个组件
- 语法：Vue.component(“组件名”，”选项”)
- 第一个参数，‘组件名’：必须是两个以上的”单词“，并且要用中划线（-）连接
- 第二个参数，选项：除了el不能用，其他选项都可以使用，比如data，methods，生命周期，watch，computed
- template选项：对组件来讲，有一个必须的选项是template，这个选项用于指定当前视图的模板（HTML字符串），在视图模板中可以使用我们学过的所有指令
- template视图结构必须是”单一节点“
- data选项：组件可以有自己独立的data选项，但是data不再是一个{}，必须是一个工厂函数
- props选项：props表示由父组件作用域传递过来的‘自定义属性’，接收之后可以通过this访问。所以props数据可以在当前组件中的指令，其他选项中使用，
- props:父组件向子组件传递数据，子组件使用props接收，可以传递基本数据类型，引用数据类型
- $emit(‘自定义事件名称’，’…将要回传给父组件的数据列表’)：用于触发一个自定义事件，同时向父组件传递数据
结论：组件化的核心就是”自定义属性props”,”自定义事件$emit()”+”自定义插槽”
- 1.props是子组件的一个选项，用于接收父组件给我的自定义属性 =>v-bind,简写为:
- 2.$emit(),是一个vue api，用于触发父组件给我的自定义事件（向父组件发送数据）=>v-on 简写为@
- 3.slot,是vue的一个内置组件，可以直接使用，称为”插槽“=>v-slot 简写为#
父子组件通信
- 1.当组件需要向子组件传递参数时，我们使用自定义属性，再在子组件中使用props接收即可
- 2.当子组件需要向父组件传递数据时，我们使用自定义事件，在子组件中使用$emit()触发并回传数据
自定义事件，在子组件中无需接收，可以直接使用。自定义属性，在子组件必须使用props接收，否则用不了
插槽
- 如何理解插槽？当我们封装自定义组件时，从组件结构的角度看，某些结构是不确定的，那么我们使用slot占个位置。当这组件被真正使用时，才能够确定这个位置放什么元素，这就叫”插槽“（插座，有插孔，但是你不确定插什么）
- 结论：以后封装组件，哪个地方不确定，就放一个slot占位置。如果有多个地方不确定，就放多个不同的slot
- 如何区分slot的不同呢？使用”命名插槽“，给slot name=’‘
- 1.slot默认叫”default“
- 2.v-slot是一个指令，用于指定用哪个slot来显示当前元素，简写#
- 3.slot xxx 可以添加任意的自定义属性，在父组件中使用v-slot来获取数据
看结构的不同来确定哪里用slot呀
