v-slot

一、认识

---

v-slot , 缩写为 #。提供具名插槽或需要接收 prop 的作用域插槽。如果 <slot><slot> 没有声明 name, 那么默认是为 default, 相当于 v-slot: default。

1.1 作用限定

• <template></template>

• <componenName></componenName>

二、语法

---

2.1 基础插槽

父组件

<template>
  <div>
    <AComp>哈哈哈</AComp>
  </div>
</template>

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

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

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot>插槽默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

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

2.2 具名插槽

完整语法

父组件

<template>
  <div>
    <AComp>
      <template v-slot:body1>哈哈哈</template>
      <template v-slot:body2>嘻嘻嘻</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">body1 插槽默认内容</slot>
    <slot name="body2">body2 插槽默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

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

简写语法

父组件

<template>
  <div>
    <AComp>
      <template #body1>哈哈哈</template>
      <template #body2>嘻嘻嘻</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">body1 插槽默认内容</slot>
    <slot name="body2">body2 插槽默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

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

2.3 动态插槽

完整语法

父组件

<template>
  <div>
    <AComp>
      <template v-slot:[slotName1]>哈哈哈</template>
      <template v-slot:[slotName2]>嘻嘻嘻</template>
    </AComp>
  </div>
</template>

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

export default {
  name: "App",
  components: { AComp },
  data(){
    return {
      slotName1: "body1",
      slotName2: "body2"
    }
  }
};
</script>

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot name="body1">body1 插槽默认内容</slot>
    <slot name="body2">body2 插槽默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

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

简写语法

父组件

<template>
  <div>
    <AComp>
      <template #[slotName1]>哈哈哈</template>
      <template #[slotName2]>嘻嘻嘻</template>
    </AComp>
  </div>
</template>

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

export default {
  name: "App",
  components: { AComp },
  data(){
    return {
      slotName1: "body1",
      slotName2: "body2"
    }
  }
};
</script>

子组件

<template>
  <div>
    <h3>A 组件 Header</h3>
    <slot name="body1">body1 插槽默认内容</slot>
    <slot name="body2">body2 插槽默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

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

2.4 作用域插槽

完整语法

父组件

<template>
  <div>
    <AComp>
      <template v-slot:body1="slotProps1"
        >{{ slotProps1.a }} - {{ slotProps1.b }}</template
      >
      <template v-slot:body2="slotProps2"
        >{{ slotProps2.b }} + {{ slotProps2.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">body1 插槽默认内容</slot>
    <slot name="body2" :a="a" :b="b" :c="c">body2 插槽默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

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

简写语法

父组件

<template>
  <div>
    <AComp>
      <template #body1="slotProps1"
        >{{ slotProps1.a }} - {{ slotProps1.b }}</template
      >
      <template #body2="slotProps2"
        >{{ slotProps2.b }} + {{ slotProps2.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">body1 插槽默认内容</slot>
    <slot name="body2" :a="a" :b="b" :c="c">body2 插槽默认内容</slot>
    <p>A 组件 Footer</p>
  </div>
</template>

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