VUE slot插槽

slot插槽为父组件提供了安插内容到子组件中的方法,本文主要讲单slot插槽,具名slot插槽,slot作用域插槽

引入

在这里插入图片描述
我们在children里面写了一个span 发现span里面的内容并没有显示出来,因为运行的时候 children组件会替换掉 children标签所在的位置,就会直接覆盖掉span

1.单slot插槽

在这里插入图片描述
当子组件模板只有一个没有属性的slot时,子组件标签下的整个HTML内容片段将插入到slot所在的DOM位置,并替换掉slot标签本身再运行代码,标签就会被渲染出来,如果不写span标签,那么slot默认会渲染slot模板里面的内容,最初在标签中的任何内容都会被视为备用内容,备用内容在子组件的作用域内编译,并且只有在父组件为空,且没有要插入的内容时,才会显示备用内容
在这里插入图片描述