vue官网的文档更新了关于插槽的部分，说明现在要用的是v-slot标签，之前的 slot和slot-scope属性已经被废弃了。所以对于插槽的知识点需要更新一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue 插槽</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
<script>
Vue.component("son", {
data() {
return {
msg: "子组件数据",
user: {
firstName: "Chai",
lastName: "HongJun",
},
};
},
template: `<div>
<slot name="son" :user=user>{{user.firstName}}</slot>
<slot></slot>
</div>`,
});
let vm = new Vue({
el: "#app",
data: {
msg: "父组件数据",
},
template: `
<son>
<template v-slot:son="fromSon"> <!-- 这里fromSon 接收的是子组件的data内容 -->
来自子组件的数据：{{fromSon.user.lastName}}
</template>
<p>这个是给默认插槽</p>
</son>
`,
});
</script>插槽也是经常用在父子组件之间，特点有这几条
插槽本身是由一个标签<slot>构成
插槽是放在子组件的模板内的，可以放在任意位置，所以<slot>控制的是位置
<slot>是一个内建的标签，不属于html标签，因此它的最终“转化形式”是由父组件模板内的内容决定，所以可以把<slot>也看作是一个自定义组件，它的模板在父组件内
当父组件不提供<slot>需要的模板的时候，<slot>本身可以准备一个默认的内容
<slot>的name属性用来区分不同的插槽，对应的插槽模板内容则是由<template>和v-slot属性构成：
所谓的作用域插槽可以简单的理解为子组件通过<slot>向父组件模板内传值。上面例子中的fromSon接收的是整个子组件的data数据，因此可以在父组件内使用子组件的数据。
<slot>这里可以是任何默认的内容<slot>
<slot name="插槽名字"></slot>
对应的渲染模板:
<template v-slot:插槽名字> // 这里是模板内容 </template>
这样当一个子组件内包含多个插槽的时候，就可以分别渲染内容了。
