Vue slot：具名插槽

tags: `Vuejs`

具名插槽 ✐

若是需要多个插槽，可以在 <slot> 中使用 name attribute，定义命名的插槽，可以定义具有多个插槽的组件。

Vue.component('my-component', {
  data() {
    return {
      user: {
        name: 'Tony',
        age: 23,
      },
    }
  },
  template: `
  <div>
      <h2><slot name="title"></slot></h2>
      <p><slot name="text"></slot></p>
  </div>`,
})

接着，父组件向命名插槽提供内容，透过 <template> 与 v-slot 指令即可，v-slot 後要加上要提供分发内容的插槽名称。

注意：v-slot 只能使用在 template 上。（有一种例外，後文提及）

const vm = new Vue({
  el: '#app',
  template: `
  <div id="app">
    <my-component>
      <template v-slot:title>标题</template>
      <template v-slot:text>一段文字</template>
    </my-component>
  </div>`,
})

会渲染成如下结果：

默认下，一个没有命名的插槽会预设为具有 default 隐含名称的插槽。

而没有使用 v-slot 指定分发名称的内容会被视作 default 隐含默认插槽的内容：

下方的 <p>这是默认插槽的内容</p> 没有指定分发的命名插槽，将会被视作 default 插槽的内容：

Vue.component('my-component', {
  data() {
    return {
      user: {
        name: 'Tony',
        age: 23,
      },
    }
  },
  template: `
  <div>
      <h2><slot name="title"></slot></h2>
      <p><slot name="text"></slot></p>
      <slot></slot>
  </div>`,
})

const vm = new Vue({
  el: '#app',
  template: `
  <div id="app">
    <my-component>
      <template v-slot:title>标题</template>
      <template v-slot:text>一段文字</template>
      <p>这是默认插槽的内容</p>
    </my-component>
  </div>`,
})

会渲染成如下结果：