插槽
- 父组件在引用子组件时希望向子组价传递模板内容；
- 子组件让父组件传过来的模板内容在所在的位置显示；
- 子组件中的就是一个槽，可以接收父组件传过来的模板内容， 元素自身将被替换；
- 用户可以拓展组件，去更好地复用组件和对其做定制化处理。
基础插槽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.component("ComponentA", {
methods: {
},
data() {
return {
};
},
template: `<div>ComponentA
组件：
<p><slot></slot></p>
</div>`,
});
app = new Vue({
el: `#app`,
template: `
<div>{{msg}}
<ComponentA>
main
</ComponentA>
</div>`,
data: {
msg: "hello world",
},
});
</script>
</body>
</html>
- 以上代码中子组件插槽位置会接收到组组件的main字段，如果子组件里不写插槽，那么会父组件写的模板内容会被吞没。
具名插槽
- 子组件
<div>ComponentA
组件：{{count}}
<p><slot name="header" ></slot></p> // header-spot
<p><slot></slot></p> // main
<p><slot name="footer"></slot></p> // footer-spot
</div>
- 父组件
<ComponentA>
<template v-slot:header="data">header-spot</template>
main
<template v-slot:footer>footer-spot</template>
</ComponentA>
作用域插槽
- 子组件插槽绑定data的变量，父组件中会动态获取到该变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.component("ComponentA", {
methods: {
handleClick() {
this.count++;
},
},
data() {
return {
count: 0,
};
},
template: `<div>ComponentA
组件：{{count}}
<p><slot name="header" :count="count"></slot></p>
<button @click="handleClick">click</button>
</div>`,
});
app = new Vue({
el: `#app`,
template: `
<div>{{msg}}
<ComponentA>
<template v-slot:header="data"> 插槽：{{data.count}}</template>
</ComponentA>
</div>`,
data: {
msg: "hello world",
},
});
</script>
</body>
</html>
插槽缩写
v-slot:header
可以写为：
#header