Vue 之 vue插槽,关于v-slot的几点理解

vue@2.6.0 开始，官方推荐我们使用 v-slot 来替代slot 和 scope-slot

一,匿名插槽(默认插槽)

当组件内插槽有且只有一个,可使用默认插槽
父组件

<!-- 默认插槽   省略v-slot:default-->
    <child>
      <template>
        <h1>默认插槽</h1>
      </template>
    </child>

子组件

<div class="child">
        <slot></slot>
  </div>

二,具名插槽

slot定义name属性,在父组件中跟在v-slot:之后
父组件

 <!-- 具名插槽 -->
    <child1>
      <template v-slot:c1>
        <h1>具名插槽c1</h1>
      </template>
    </child1>

子组件

<div class="child1">
    <slot name='c1'></slot>
  </div>

三,作用域插槽

使父组件的template内部可以使用子组件内的data
父组件

 <!-- 作用域插槽 -->
    <child2>
      <!-- 这里用mmm接收子组件的slot传过来的数据 -->
      <template v-slot:c2='mmm'>
        <h1>作用域插槽c2</h1>
        {{mmm}}
      </template>
    </child2>

为了使代码简洁,可以进行解构赋值(亦可重命名解构变量)

<!-- 作用域插槽---解构赋值 -->
    <hr/>
    <child2>
      <!-- 这里直接对传过来的msg进行解构 -->
      <template v-slot:c2='{msg}'>
        <h1>作用域插槽c2--解构</h1>
        {{msg}}
      </template>
    </child2>

也可以动态定义插槽名称

<child2>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</child2>

子组件

<div class="child2">
    <!-- 作用域插槽,将子组件data通过slot传递给父,只能在组件标签内使用 -->
     <slot name='c2' :msg='msg'></slot>
  </div>

简写

默认插槽的名称默认为 default
只有一个默认插槽时,v-slot:default可写作v-slot或不写
v-slot:c1 语法糖为 #c1