vue3.0 父子组件插槽的简单使用

父组件想要引入子组件，但又不能直接修改子组件内容（比如子组件被多个界面引用，但别的页面并不需要此界面添加的内容），该如何额外添加显示内容呢？

废话不多说，直接上

普通插槽

父组件

<template>
    <div>
      <div >大家好我是父组件</div>
      <son>
        <p>测试一下吧内容写在这里了能否显示</p> 
      </son>
    </div>
</template>

子组件

<template>
  <div>
      <div>我是子组件</div>
      <slot /> 
  </div>
</template>

效果

 

 

 

具名插槽

父组件
<son>
    <!-- <p>测试一下吧内容写在这里了能否显示</p> -->
    <!-- slot="x" Vue2.x写法，3.x不支持了 -->
    <!-- <p slot='具名插槽A'>具名A</p> -->
    <template v-slot:具名插槽A>具名A</template>
    <template v-slot:具名插槽B>具名B</template>
    <template v-slot:具名插槽C>具名C</template>
 </son>

子组件
<slot name="具名插槽A" />
<slot name="具名插槽B" />
<slot name="具名插槽C" />

效果

 

作用域插槽

父组件
当然也可以直接解构出来
  <template v-slot:default="slotProps">
    <span>{{slotProps.count}}</span>
  </template>
子组件
<slot :count="count"/>

  export default {
    data() {
      return {
        count: 100,
      }
    },
  }

效果