1，默认插槽
slot用于组件内，也就是相当于占位符，例如：有两个组件demo1.vue,demo2.vue
如果<slot></slot>写在demo1.vue 中，然后在demo2.vue组件引用子组件demo1.vue,那在demo2中的<demo1>插入的内容</demo1>标签“插入的内容“就会替换掉demo1中的<slot></slot>标签，相当于占位符。
例如：
demo1.vue
<template>
<div><slot>待替换的内容区</slot></div>
</template>
demo2.vue
<div id="app">
<demo1>
<div style="color: red;">内容1</div>
<div>123</div>
</demo1>
</div>
上面的例子中，demo1中的<div><slot>待替换的内容区</slot></div>会被demo2中的
<div style="color: red;">内容1</div>
<div>123</div>
替换。
2，具名插槽
在组件中demo3.vue中编写
<template>
<div id="app">
<my-con>
<span slot="center">中间内容</span>
<span slot="left">左侧内容</span>
<span slot="right">右侧内容</span>
</my-con>
</div>
</template>
在demo4..vue中编写
<template>
<div>
<div>
<slot name="left"></slot>
<slot name="center"></slot>
<slot name="right"></slot>
</div>
</div>
</template>
用slot中的name属性绑定名字，然后在demo4中给<demo3>标签一个slot属性绑定关联到对应的内容
3，作用域插槽
例子：
代码：
<!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">
<!-- ulists自定义属性 -->
<!-- <img src="" alt=""> -->
<!-- <a href=""></a> -->
<!-- 自定义属性不要用大写 如果要在组件内用驼峰形式来写变量名-->
<my-table :lists-arr="users">
<!-- <template> -->
<!-- 2. 通过slot-scope指令绑定slot标签上面的集合（scope） -->
<button slot-scope="scope" v-on:click="edit(scope)">编辑</button>
<!-- </template> -->
</my-table>
<p>--------------</p>
<my-table :listsArr="users1">
<button>删除</button>
</my-table>
</div>
</body>
<template id="temp">
<table>
<thead>
<tr>
<th>姓名{{users}}</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(user,index) in listsArr" :key="index">
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>
<!-- 1. 在插槽内通过自定义属性绑定我们要传递到外面去的值 -->
<slot :username="user.name" :age="user.age" :idx="index" :user="user"></slot>
</td>
</tr>
</tbody>
</table>
</template>
<script>
new Vue({
el: '#app',
data: {
users: [
{ name: '张三', age: '20' },
{ name: '李四', age: '19' },
{ name: '王五', age: '22' },
],
users1: [
{ name: '张三1', age: '10' },
{ name: '李四2', age: '19' },
{ name: '王五3', age: '22' },
]
},
methods: {
edit(scope) {
console.log('编辑按钮响应')
console.log(scope)
// console.log(this.users)
}
},
components: { // 定义组件的地方
MyTable: { // 组件的名称
data() { // 定义组件内使用的变量，（子组件内的data属性一定是要function的形式，返回一个对象）
return {
users: 1
}
},
// 自定义组件具体结构
template: "#temp",
// props: ["ulists"],
props: { // 定义自定义属性的
listsArr: {
type: Array,
default: []
}
},
}
}
})
</script>
</html>
通过slot-scope指令绑定slot标签上面属性的集合,用于传值。在上面例子中，子组件定义了username,age,idx三个自定义属性，在父组件中，用slot-scope属性接收这个自定义属性。
