vue笔记_插槽

定义：插槽是父子组件的另外一种交互形式，子组件在自己的组件中提供了一个占位符，父组件可以在这个占位中填充任何代码，在渲染过程中，父组件填充的代码会渲染到这个占位符的位置；

[1]默认插槽

• 父组件

  <son>
    <!-- 填充代码 -->
  </son>
  

• 子组件

  <template>
    <!-- slot为占位符 -->
    <slot></slot>
  </template>
  

[2]具名插槽

• 当一个子组件中带有多个插槽时，需要使用名字加以区分

• 父组件

  v-slot:插槽名 可以简写为 #插槽名

  <son>
    <template v-slot:插槽名>
      <!-- 填充代码 -->
    </template>
  </son>
  

• 子组件

  <template>
    <slot name='插槽名'></slot>
  </template>
  

[3]携带参数

• 父组件

  <!-- 默认插槽携带参数-->
  <son>
    <template v-slot:default='data'>
      <!-- 使用data数据 -->
    </template>
  </son>
  <!-- 具名插槽携带参数 -->
  <son>
    <template v-slot:插槽名='data'>
      <!-- 使用data数据 -->
    </template>
  </son>
  

• 子组件

  <template>
    <slot name='插槽名' :data='传递的参数'></slot>
  </template>