[JavaScript知识库]2021-07-21 vue插槽

说明

为什么要有插槽？
是为了方便优雅地在父组件中向子组件传递向子组件传递dom结构。

代码处理

子组件

该子组件的组件名为ChildComponent:

<template>
  <div class="the-box">
    <div>子组件开始</div>

    <div style="border: 1px solid rgb(255, 0, 0)">
      <div>插槽1---开始</div>
      <div>`slot`遍历值:{{ 子组件prop2 }}</div>
      <template v-for="(item, index) in 子组件prop2">
        <slot
          name="插槽1"
          :插槽1数据1="item"
          :插槽1数据2="{
            子组件局部作用域变量: item,
            子组件全局作用域变量: 静态设置.设置名1,
          }"
          :插槽1数据3="index"
        >
          插槽1默认内容
        </slot>
      </template>
      <div>插槽1---结束</div>
    </div>

    <div style="border: 1px solid rgb(0, 255, 0)">
      <div>默认插槽---开始1</div>
      <slot>
        一个不带`name`的`slot`出口会带有隐含的名字`default`;这里是插槽默认值;
      </slot>
      <div>默认插槽---结束1</div>
    </div>

    <div style="border: 1px solid rgb(255, 0, 255)">
      <div>默认插槽---开始2</div>
      <slot name="default"> </slot>
      <div>默认插槽---结束2</div>
    </div>

    <div style="border: 1px solid rgb(0, 0, 255)">
      <div>插槽2---开始</div>
      <div>`slot`遍历值:{{ 枚举.枚举一 }}</div>
      <template v-for="(item, index) in 枚举.枚举一">
        <slot
          name="插槽2"
          :插槽2数据1="item"
          :插槽2数据2="{
            局部作用域: item,
            全局作用域: 静态设置.设置名1,
          }"
          :插槽2数据3="index"
        ></slot>
      </template>
      <div>插槽2---结束</div>
    </div>

    <div>子组件结束</div>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    子组件prop1: {
      type: [Object, String, undefined],
      default: '',
    },
    子组件prop2: {
      type: [Array],
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      枚举: {
        枚举一: [
          { 名称: '名称1', 数值: '数值1' },
          { 名称: '名称2', 数值: '数值2' },
        ],
      },
      静态设置: {
        设置名1: '设置值1',
      },
    }
  },
}
</script>

<style scoped>
.the-box {
  margin: 20px 5px 20px 10px;
  border: 1px solid rgb(255, 255, 0);
}
.the-box > div {
  margin: 8px 10px 2px 5px;
}
</style>

同目录下的父组件

<template>
  <div class="page-container">
    <div class="form-page-box">
      <div>父组件--开始</div>
      <ChildComponent
        子组件prop1="父组件传入prop1值"
        :子组件prop2="[1, 2, 3, 4, 8]"
      >
        <template #插槽1="scope">
          <div style="border: 1px solid rgb(0, 0, 0)">{{ scope }}</div>
        </template>
        <template #default="scope"> </template>
        <template #插槽2="scope">
          <div>{{ scope }}</div>
        </template>
      </ChildComponent>
      <div>父组件--结束</div>
    </div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'
export default {
  components: {
    ChildComponent,
  },
}
</script>

<style lang="scss" scoped></style>

图片

常见名词

父组件

vue2.6.0版本之前的写法

<template slot="default" slot-scope="scope">
  {{ scope.row.prodName }}
</template>

vue2.6.0版本后新的写法

完整写法

<template v-slot:default="scope">
  {{ scope.row.prodName }}
</template>

简洁写法

<template #default="scope">
  {{ scope.row.prodName }}
</template>

子组件名词

参考

1. 具名插槽;
2. 一次性讲明白vue插槽slot;
3. Vue 插槽详解;
4. 在Vue中如何使用插槽;