09.有条件的渲染插槽

Posted 2022-08-10 @大迁世界

这节课，我们来看下有条件的渲染插槽。首先，我们来看个例子。

我们知道，每个 Vue 组件都 有一个特殊的对象 $slots，默认插槽的 key 是 default，其它命名插槽的 key，就是插槽的名称。

我们来看个例子，假设，有一个 User 组件，内容如下：

// User.vue
<template>
  <div>
    <slot />
    <slot name="header"></slot>
  </div>
</template>

<script>
export default 
  mounted() 
    console.log("$slots", this.$slots);
  ,
;
</script>

在 User 组件中，我们声明了两个插槽，一个是默认 <slot /> ，还有一个命名插槽 header。然后，在组件挂载的时候把当前组件的 $slots 打印出来。

接着，在父组件中，我们引入一个 User 组件，内容如下：

<template>
  <div>
    <User> </User>
  </div>
</template>

<script setup>
import User from "./components/User.vue";
&