插槽
插槽也是组件传值的一种方式。
组件的最大特性就是重用，而用好插槽能大大提高组件的可重用能力。
通俗的来讲，插槽无非就是在子组件中挖个坑，坑里面放什么东西由父组件决定。
插槽类型有：
- 单个（匿名）插槽
- 具名插槽
- 作用域插槽
插槽标签：
匿名插槽
简单来讲就是没有名字的插槽，在组件使用过程中，一个子组件中只能具备一个匿名插槽。
步骤
- 父组件通过在子组件标签之间写内容
- 子组件通过插槽获取父写的内容
父组件
<div> <Child>{{thing}}</Child> <Child>用户名不能为空</Child> <Child>用户名已经被使用</Child> <Child>密码输入不一致</Child> </div>
子组件
<div class="warn"> 错误：<slot></slot> </div>
具名插槽
与匿名插槽非常的像，区别在于具名插槽是具有名字的插槽，与匿名相比多了个名字而已。
步骤
- 子组件通过预留slot标签来挖坑，但是这里插槽有名字（只需要给slot标签name属性即可）
- name值在当前范围内要唯一
- 可以存在多个具名插槽
- 同时也可以存在匿名插槽，匿名插槽只能有一个
- 父组件需要去填坑，父组件写在子组件标签之间的元素也需要存在多个，每个元素上需要有绑定到的插槽的名字（通过slot="名"形式进行指定）
- 如果元素没有名字则绑定到对应的匿名插槽上，如果子组件没有匿名插槽则数据丢弃
作用域插槽
**应用场景：**父组件对子组件的内容进行加工处理
作用域插槽是一种特殊类型的插槽，作用域插槽会绑定了一套数据，父组件可以拿这些数据来用，于是，情况就变成了这样：样式父组件说了算，但父组件中内容可以显示子组件插槽绑定的数据。
简单来讲：子也可以往坑里放数据，让父组件去拿（子→父）
示例代码
父组件
<template> <div> <!-- 作用域插槽： 1. 三个插槽中最难理解的一个 2. 作用：子-父 3. 子组件如果需要把数据往坑里放，需要将数据以属性值的形式放在slot标签上，属性值可以多个，但是名不能用name 4. 父需要给子组件标签里加一个元素，元素现在一般是div（理论上讲任意标签都行），给div加上slot-scope属性，值一般是props 5. 第4步中的props就是第3步中绑定的那些数据的集合（对象形式） 6. slot-scope属性所在标签上面不能再有其它的标签，必须是子组件标签 --> <Child :uname="name"> <div slot-scope="props"> <div> <button @click="changeName(props.newname)">修改名字</button> </div> </div> </Child> </div> </template> <script> import Child from "./Child.vue" export default { data() { return { name: "牛牛", } }, components: { Child, }, methods: { changeName(name) { this.name = name }, }, } </script> <style></style>
子组件
<template> <div> <div>勇敢{{ uname }}，不怕困难。</div> <!-- <button @click="changeName">修改名字</button> --> <slot :newname="newname"></slot> </div> </template> <script> export default { data() { return { newname: "虎虎", } }, props: { uname: { type: String, }, }, // methods: { // changeName() { // this.uname = this.newname // }, // }, } </script> <style></style>
