1.匿名插槽
1.1什么是插槽?
默认情况下使用子组件时在子组件中编写的元素是不会被渲染的
如果子组件中有部分内容是使用时才确定的, 那么我们就可以使用插槽
插槽就是在子组件中放一个"坑", 以后由父组件来"填"
1.2什么是匿名插槽
没有名字的插槽, 会利用使用时指定的能容替换整个插槽
- 注意点: 如果有多个匿名插槽, 每一个匿名插槽都会被指定的内容替换
虽然写多个匿名插槽不会报错, 但是在企业开发中推荐只能有一个匿名插槽
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<p>father</p>
<son>
<p>匿名插槽1</p>
<p>匿名插槽2</p>
</son>
</div>
</template>
<template id="son">
<div>
<p>son</p>
<slot></slot>
</div>
</template>
<script>
Vue.component("father", {
template: "#father",
components: {
"son": {
template: "#son",
}
}
})
let vue = new Vue({
el: "#app",
data: {
},
})
</script>
2具名插槽
2.1什么是具名插槽
默认情况下有多少个匿名插槽, 我们填充的数据就会被拷贝多少份
这导致了所有插槽中填充的内容都是一样的
那么如果我们想给不同的插槽中填充不同的内容怎么办呢?
这个时候就可以使用具名插槽
2.2具名插槽使用
通过插槽的name属性给插槽指定名称
在使用时可以通过slot="name"方式, 指定当前内容用于替换哪一个插槽
- 注意点: 如果没有指定要替换哪个插槽中的内容, 则不会被替换
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<p>father</p>
<son>
<p slot="demo1">woshi</p>
<p slot="demo1">woshi</p>
</son>
</div>
</template>
<template id="son">
<div>
<p>son</p>
<slot name="demo1"></slot>
</div>
</template>
<script>
Vue.component("father", {
template: "#father",
components: {
"son": {
template: "#son",
}
}
})
let vue = new Vue({
el: "#app",
data: {
}
})
</script>
3.v-slot
3.1什么是v-slot指令?
v-slot指令是Vue2.6中用于替代slot属性的一个指令
在Vue2.6之前, 我们通过slot属性告诉Vue当前内容填充到哪一个具名插槽
从Vue2.6开始, 我们通过v-slot指令告诉Vue当前内容填充到哪一个具名插槽
- 注意点: v-slot指令只能用在template标签上
可以使用#号替代v-slot:
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<son>
<template v-slot:demo1>
<p>demo11</p>
<p>demo12</p>
</template>
<template v-slot:demo2>
<p>demo21</p>
<p>demo22</p>
</template>
</son>
<p>father</p>
</div>
</template>
<template id="son">
<div>
<slot name="demo1">demo1</slot>
<slot name="demo2">demo2</slot>
</div>
</template>
<script>
Vue.component("father", {
template: "#father",
components: {
"son": {
template: "#son",
}
}
})
let vue = new Vue({
el: "#app",
data: {
}
})
</script>
4.作用域插槽
4.1什么是作用域插槽
作用域插槽就是带数据的插槽, 就是让父组件在填充子组件插槽内容时也能使用子组件的数据
4.2如何使用作用域插槽
4.2.1在slot中通过 v-bind:数据名称="数据名称" 方式暴露数据
4.2.2在父组件中通过 <template slot-scope="作用域名称"> 接收数据
4.2.3在父组件的<template></template>中通过 作用域名称.数据名称 方式使用数据
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<son>
<template slot-scope="abc">
<li v-for="(name, index) in abc.names">son {{name}}</li>
</template>
</son>
</div>
</template>
<template id="son">
<div>
<slot v-bind:names="names"></slot>
</div>
</template>
<script>
Vue.component("father", {
template: "#father",
components: {
"son": {
template: "#son",
data: function (){
return {
names: ["zs","ls","ww"]
}
}
}
}
})
let vue = new Vue({
el: "#app",
})
</script>
5.vue的v-slot指令
在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。
它取代了 slot 和 slot-scope
也就是说我们除了可以通过v-slot指令告诉Vue内容要填充到哪一个具名插槽中
还可以通过v-slot指令告诉Vue如何接收作用域插槽暴露的数据
v-slot:插槽名称="作用域名称"
<div id="app">
<father></father>
</div>
<template id="father">
<div>
<p>father</p>
<son>
<!-- <template v-slot:default="abc">-->
<!-- <li v-for="(name, index) in abc.names">{{name}}</li>-->
<!-- </template>-->
<template v-slot:demo="abc">
<li v-for="(name, index) in abc.names">{{name}}</li>
</template>
</son>
</div>
</template>
<template id="son">
<div>
<p>son</p>
<!-- <slot v-bind:names="names">default</slot>-->
<slot name="demo" v-bind:names="names">default</slot>
</div>
</template>
<script>
Vue.component("father", {
template: "#father",
components: {
"son": {
template: "#son",
data: function (){
return {
names: ["zs", "ls", "ww"]
}
}
}
}
})
let vue = new Vue({
el: "#app",
})
</script>
