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,
      }
    },
  }

效果