Vue3 通过JS获取插槽内容

先上样例

//父组件
<template>
  <div>Tabs示例
    <h1>示例1</h1>
    <Tabs v-model:selected="x">
      <Tab title="导航1">内容1</Tab>
      <Tab title="导航2">内容2</Tab>
    </Tabs>
  </div>
</template>

//子组件
......
<script lang="ts">
export default {
    setup(props, context) {
      //获得插槽虚拟节点<数组>
       const defaults = context.slots.default();
    }
}
</script>
......

注:setup下context.slots.default()获取的虚拟节点可以跟import引用子组件比较

//子组件
......
<script lang="ts">
import Component  from "./Component.vue";
export default {
    setup(props, context) {
      //获得插槽虚拟节点<数组>
       const defaults = context.slots.default();
        if(defaults [0].type === Component){
          // coding
        }
    }
}
</script>
......
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容