09.有条件的渲染插槽

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

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

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

// User.vue

  

    
    
  



export default {
  mounted() {
    console.log("$slots", this.$slots);
  },
};

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

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

  

     
  



import User from "./components/User.vue";
&