作用域插槽

2023年04月23日

柏拉文

越努力，越幸运

一、认识

---

作用域插槽的形式为 v-slot:插槽Name="插槽Props" , 这样的话, 子组件可以传递一些数据供父组件所使用

二、语法

---

2.1 基础插槽

父组件

<template>
  <div>
    <AComp>
      <template v-slot:body1="slotProps">
        {{ slotProps.a }} - {{ slotProps.b }} - {{ slotProps.c }}
      </template>
      <template v-slot:body2="slotProps">
        {{ slotProps.a }} + {{ slotProps.b }} + {{ slotProps.c }}
      </template>
    </AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
};
</script>

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot name="body1" :a="a" :b="b" :c="c"></slot>
    <slot name="body2" :a="a" :b="b" :c="c"></slot>
    <slot name="body3">A 组件 Body3 默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

<script>
export default {
  name: "AComp",
  data() {
    return {
      a: 1,
      b: 2,
      c: 3,
    };
  },
};
</script>

2.2 解构插槽

父组件

<template>
  <div>
    <AComp>
      <template v-slot:body1="{ a, b, c }">
        {{ a }} - {{ b }} - {{ c }}
      </template>
      <template v-slot:body2="{ a, b, c }">
        {{ a }} + {{ b }} + {{ c }}
      </template>
    </AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
};
</script>

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot name="body1" :a="a" :b="b" :c="c"></slot>
    <slot name="body2" :a="a" :b="b" :c="c"></slot>
    <slot name="body3">A 组件 Body3 默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

<script>
export default {
  name: "AComp",
  data() {
    return {
      a: 1,
      b: 2,
      c: 3,
    };
  },
};
</script>

2.3 简写插槽

v-slot 可以简写为 # 。因此, v-slot: 插槽Name = ”插槽Props“ 可以简写为 #插槽Name="插槽Props"

父组件

<template>
  <div>
    <AComp>
      <template #body1="{ a, b, c }"> {{ a }} - {{ b }} - {{ c }} </template>
      <template #body2="{ a, b, c }"> {{ a }} + {{ b }} + {{ c }} </template>
    </AComp>
  </div>
</template>

<script>
import AComp from "./aComp.vue";

export default {
  name: "App",
  components: { AComp },
};
</script>

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot name="body1" :a="a" :b="b" :c="c"></slot>
    <slot name="body2" :a="a" :b="b" :c="c"></slot>
    <slot name="body3">A 组件 Body3 默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

<script>
export default {
  name: "AComp",
  data() {
    return {
      a: 1,
      b: 2,
      c: 3,
    };
  },
};
</script>