1.插槽的理解
根据自己看的博客,CSDN,引用其他博主,来理解插槽。
插槽的目的在于,是组件更具有扩展性。举个栗子,电脑预留的usb接口,可以用来连接多种外部设备,耳机、音响、U盘等等,使得更具有扩展性。插槽slot的作用正是如此,例如,组件中的一个地方,默认情况下为button,而在使用的时候,我们有需求需扩展为span,扩展为input,这时候我们就需要使用到插槽。
假如父组件需要在子组件内放一些DOM元素,那么这些DOM是显示呢还是不显示呢?
默认情况下是不会显示的,如下图所示,页面并没有显示父组件增加的我是魔鬼 元素内容。那么我执意要加DOM元素到子组件上该怎么实现呢?这就用到了slot插槽,使用slot这个标签可以将父组件放在子组件的内容,放到它想显示的地方
<div id="app">
<children>
<span>我是魔鬼</span>
<!--上面这行不会显示-->
</children>
</div>
<script>
var vm = new Vue({
el: '#app',
components: {
children: {
template: "<h1>我是子组件</h1>"
}
}
});
</script>
2.solt插槽的使用
<div id="app">
<my-link>百度</my-link>
<my-link>知乎</my-link>
<my-link><i>小米</i></my-link>
<my-link></my-link>
<p><i>aaa</i></p>
<hr>
</div>
<template id="t1">
<div>
<a href="https://www.baidu.com">
<!--插槽标签,插槽内可以包含任意内容或者HTML标签-->
<!--slot标签内给定的内容为插槽的默认值-->
<slot>slots标签</slot>
<!--内部也可以插入其他文本-->
hello world
</a>
</div>
</template>
<script>
let vm = new Vue({
el: "#app",
data: {},
methods: {},
components:{
'my-link':{
template:"#t1",
},
layout:{
template: "#t2",
}
}
});
</script>
3.具名插槽
当子组件的功能复杂时,子组件的插槽可能并非是一个。比如我们封装一个导航栏的子组件,可能就需要三个插槽,分别代表左边、中间、右边。那么,外面在给插槽插入内容时,如何区分插入的是哪一个呢?
这时候,我们就需要给slot指定一个name属性,也就是具名插槽。
注意
1.指定插槽位置,需要template标签来实现
2.当模板中出现多个插槽的时候,可以给插槽加一个name属性进行区分
3.插槽name的默认值为default,并且在调用组件时候,会自动优先向没有name的插槽中填充内容
4.如果存在多个没有name的插槽,或者name相同的插槽,则按照顺序填充最上面的插槽
<div id="app">
<layout>
<!--指定插槽位置,需要template标签来实现-->
<!--缩写:v-slot:可以改为#-->
<template #foot>
<h3>我是底部内容</h3>
</template>
<template v-slot:head>
<h3>我是头部内容</h3>
</template>
<h3>我是身体内容</h3>
</layout>
</div>
<template id="t2">
<div>
<!--当模板中出现多个插槽的时候,可以给插槽加一个name属性进行区分-->
<header>
<slot name="head"></slot>
</header>
<div>
<!--1.插槽name的默认值为default,并且在调用组件时候,
会自动优先向没有name的插槽中填充内容
2.如果存在多个没有name的插槽,或者name相同的插槽,
则按照顺序填充最上面的插槽-->
<slot></slot>
</div>
<footer>
<slot name="foot"></slot>
</footer>
</div>
</template>