Vue3 通過JS獲取插槽內(nèi)容

先上樣例

//父組件
<template>
  <div>Tabs示例
    <h1>示例1</h1>
    <Tabs v-model:selected="x">
      <Tab title="導(dǎo)航1">內(nèi)容1</Tab>
      <Tab title="導(dǎo)航2">內(nèi)容2</Tab>
    </Tabs>
  </div>
</template>

//子組件
......
<script lang="ts">
export default {
    setup(props, context) {
      //獲得插槽虛擬節(jié)點<數(shù)組>
       const defaults = context.slots.default();
    }
}
</script>
......

注:setup下context.slots.default()獲取的虛擬節(jié)點可以跟import引用子組件比較

//子組件
......
<script lang="ts">
import Component  from "./Component.vue";
export default {
    setup(props, context) {
      //獲得插槽虛擬節(jié)點<數(shù)組>
       const defaults = context.slots.default();
        if(defaults [0].type === Component){
          // coding
        }
    }
}
</script>
......
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容