vue基础-组件&插槽

组件

组件化的意义：封装（复用，把逻辑隐藏起来，提高可维护性），快速开发（搭积木）

约定：我们通常把那些除了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呀