Vue slot 插槽

定义

插槽是Vue为组件的封装者提供的能力。允许开发者在封装组件时把不确定的、希望用户指定的部分定义为插槽。

默认插槽

Vue规定：每个slot插槽，都要有一个 name 属性。

如果省略了slot的name属性，则有一个默认的名称：default。

slot组件

<template>
  <div>
    <h1>This is h1</h1>
    <slot>
      <h2>This is h2</h2>
    </slot>

    <slot name="slotName">
      <h2>This is h2</h2>
    </slot>
</template>

引用slot组件

<template>
  <p>Hello default</p>
</template>

<template v-slot:slotName>
  <p>Hello slotName</p>
</template>

默认内容

官方叫做后备内容。

slot标签中提供默认内容。

<slot>
  <h2>This is h2</h2>
</slot>

引用时简写形式

引用slot组件时，使用v-slot指定需要将自定义内容替换默认内容。

v-slot只能用在Component或template标签上。

v-slot:default简写是#default。

<template>
    <div>
        <SlotComponent>
          <template #default>
            <h5>This is h5</h5>
          </template>

          <template #slotName>
            <p>Hello slotName</p>
          </template>
        </SlotComponent>
    </div>
</template>

具名插槽

slot中指定name属性的插槽就是具名插槽。

作用域插槽

带数据的插槽，推荐使用scope作为变量名来接收数据。

<template>
    <div>
      <slot name="slotName" msg="this is msg" :scope-data="scopeData">
        This is slotName
      </slot>
    </div>
</template>

<script>
export default {
  name: "SlotComponent",
  data: () => ({
    scopeData: {
      "data1": "this is data1"
    }
  })
}
</script>

引用slot组件，{msg, scopeData}解构了传过来的对象。如果不解构需要再多一层对象。

<template>
  <div class="home">
    <SlotComponent>
      <template #slotName="{msg, scopeData}">
        <p>Hello slotName</p>
        <p>{{ msg }} --- {{ scopeData.data1 }}</p>
        <input type="text" v-model:value="scopeData.data1">
      </template>

    </SlotComponent>
  </div>
</template>

具体应用

slot组件

<template>
  <div>
    <h1>This is h1</h1>
    <!--  Vue 规定：每个 slot 插槽，都要有一个 name 属性  -->
    <!--  如果省略了 slot 的 name 属性，则有一个默认的名称： default  -->
    <slot>
      <h2>This is h2</h2>
    </slot>
  </div>
</template>

<script>
export default {
  name: "SlotComponent"
}
</script>

引用slot组件

<template>
  <div class="home">
    <SlotComponent>
      <!-- 默认情况下填充到 default 插槽中 -->
      <h3>This is h3</h3>
      <h4>This is h4</h4>

      <!--   v-slot 只能用在 Component 或 template   -->
      <!--   v-slot:default 简写是 #default   -->
      <template v-slot:default>
        <h5>This is h5</h5>
      </template>

      <template v-slot:title="scope">
        <p>
          Hello Title
        </p>
        <p>
          {{ scope }} --- {{ scope.msg }}
        </p>
      </template>

      <template #body="scope">
        <p>
          Hello Body
        </p>

        <p>
          {{ scope }} --- {{ scope.userInfo }}
        </p>

        <input type="text" v-model:value="scope.userInfo.name">
      </template>

      <template #tail="{msg, scopeData}">
        <p>
          Hello Tail
        </p>

        <p>
          {{ msg }} --- {{ scopeData.data1 }}
        </p>

        <input type="text" v-model:value="scopeData.data1">
      </template>

    </SlotComponent>

  </div>
</template>

<script>
// @ is an alias to /src
import SlotComponent from "@/components/SlotComponent";

export default {
  name: 'HomeView',
  components: {
    SlotComponent,
  },
}
</script>