VUE slot插槽

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

引入

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

1.单slot插槽

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

具名solt插槽

上面演示的模板中只有一个solt，如果一个组件中想要使用多个solt，就需要使用具名slot。 元素可以用一个特殊的属性name来配置分发内容，多个solt可以有不同的名字，具名solt将匹配模板内容片段中有对应slot特性的元素，

<my-component>
	<h1 solt=“header”>this is the title</h1>
<p>主要内容的一个段落</p>
<p>另一个主要段落</p>
<div slot=“footer”>
	<address>这里有一些联系信息</address>
</div>
</my-component>
<script>
	Cue.component(‘my-compoen’,{
	template:’<div>
	<header>
	//这个的意思就是在这个地方引用名字为header的solt插槽
	<slot name=“header”></slot>
	</header>
	<main><slot></slot</main>
	<footer>
	<slot name=“footer”></slots >
</footer>

</div>’

})



</script>