vue slot 在自定义组件中嵌套dom元素

我们先来看下面这段代码

<template>
    <div class = "framework">
        <copy-list>
             <div>你好</div>
             <div>你好吗</div>
         </copy-list>
    </div>
</template>
<script>
import copyList from '@/components/infoManag/copyList.vue';
export default {
      
      
    components:{
      
      
        copyList
    },
    data() {
      
      
        return {
      
      
        }
    }
}
</script>
<style scoped>
</style>

很显然 copy-list 对应我们在components中声明的copyList 提示一个自定义组件

而我们在其中插入了几个dom节点
那么 我们看到copyList 文件

<template>
    <div>
        <span>我很好</span>
        <slot/>
    </div>
</template>
<script>
export default {
      
      
    data(){
      
      
        return{
      
      

        }
    },
    mounted() {
      
      
        console.log(this.$slots);
    }
}
</script>
<style scoped>
</style>

运行结果如下

简单说 在自定义组件中套了dom
那么 在组件中 只要将slot标签放在哪 这些元素就会 被渲染在哪个位置

而 我们可以通过this.$slots看到这些元素