插槽的最最简单使用,上面已有例子,这里就不写了,接下来看看,插槽其他使用场景
插槽的使用 - 具名插槽
描述:具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽,而且可以放在不同的地方,而父组件填充内容时,可以根据这个名字把内容填充到对应插槽中。
如下代码:
1. 子组件的代码,设置了两个插槽(header和footer):
2. 父组件填充内容, 父组件通过 v-slot:[name] 的方式指定到对应的插槽中
3.展示的效果:
接下来再来看看,父组件中填充内容的时候,顺序调换下,看下能不能内容能不能对应上:
1. 子组件代码不变,父组件代码中填充顺序调换下(如图,在父组件中,footer 和 header 的填充位置对换):
2. 展示的效果:
由此看出,即使父组件对插槽的填充的顺序打乱,只要名字对应上了,就可以正确渲染到对应的插槽中。即: 父组件填充内容时,是可以根据这个名字把内容填充到对应插槽中的