封装组件的意义

1. 根源：在构建多页面应用时，有很多相似的视图结构，但没法实现复用
2. 作用：封装复用，快速开发

如何封装可复用的UI组件

• 设计UI组件 = 自定义属性(v-bind) + 自定义事件(v-on) + 自定义插槽( v-slot)

1. 根据UI稿和PRD原型，对一组视图进行分析，找出它们之间的相似点和差异点
2. 把相同点设计成HTML视图结构
3. 使用自定义属性设计那些文本、样式等差异
4. 使用自定义事件，设计那些有差异的功能（交互事件、功能事件）
5. 使用自定义插槽设计那些可以由用户自定义的视图结构

在Vue中如何封装组件

1. template选项，用于指定组件的视图结构
2. props选项，用于接收父组件传递过来的自定义属性
3. data(){}选项，用于定义组件自有的声明式变量
4. methods选项，用于封装组件自有的函数或事件处理器
5. this.$emit('自定义事件名','事件参数') 用于在组件中向父组件传递数据

理解插槽

• Vue内置了一个组件 <slot>组件
• 当我们在封装自定义组件时，如果一段视图结构无法确定，这时可以使用 <slot>占位，把这个视图位置交给用户决定

1. 具名插槽
   • 的默认名字叫default
   • 当在自定义组件中需要用到多个不同的时，我们给它取个名字，即<slot name='icon'>
   • 当用户使用这个自定义组件时，使用 v-slot:icon 来指定显示在哪些具名插槽中
2. v-slot指令
   • 可指定视图结构显示在哪个具名插槽中
   • 简写为 #具名插槽名='scope'
   • <template #slot='icon'></template>