Vue 3 中 slot插槽的使用方法

插槽，名字挺新奇。但不要被他的名字难住。其实就是父组件向子件件传递信息的一种手段。我们可以用这样的方法向子组件传值。

父组件（app.vue)

<template><MyCompoent :transData="{a:reactiveObj.a,breactiveObj.b,c}">
</template><script>import {reactive,ref} from 'vue';//批量定义响应式变量const reactiveObj = reactive(a,b)//单独定义的响应式变量const c = ref('c的值')//其他方式定义的能在标签用的...
</script>

子组件(MyComponent.vue)

<template><el-row><el-col>{{a}}</el-col></el-row>
</template><script>import {defineProps} from 'vue'const prop = defineProps({transData:{type:Object,default:()=>({})}})const {a,b,c}=prop.transData;
</script>

通过这样的方法可以向子组件传值。那么插槽呢，下面详细说一说。这种传值的方式。其实传的不是『值』，而是更多样的信息，如代码片段等。

1. 匿名插槽

匿名插槽是最基础的插槽类型，用于将父组件提供的内容插入到子组件指定的位置。

子组件（MyComponent.vue）

<template><div><h2>组件标题</h2><!-- 定义匿名插槽 --><slot></slot></div>
</template><script setup>
// 这里可以写组件的逻辑代码
</script>

在上述代码中，<slot></slot> 定义了一个匿名插槽，它是父组件内容的插入点。

父组件（App.vue）

<template><div><MyComponent><!-- 插入到匿名插槽的内容 --><p>这是插入到组件内部的内容</p></MyComponent></div>
</template><script setup>
import MyComponent from './components/MyComponent.vue';
</script>

2. 具名插槽

具名插槽允许在一个组件中定义多个插槽，并让父组件可以指定内容插入到哪个插槽中。

子组件（MyComponent.vue）

<template><div><header><!-- 具名插槽：header --><slot name="header"></slot></header><main><!-- 匿名插槽 --><slot></slot></main><footer><!-- 具名插槽：footer --><slot name="footer"></slot></footer></div>
</template><script setup>
// 组件逻辑代码
</script>

这里定义了三个插槽，一个匿名插槽和两个具名插槽（header 和 footer）。

父组件（App.vue）

<template><div><MyComponent><!-- 插入到具名插槽 header 的内容 --><template #header><h1>这是头部内容</h1></template><!-- 插入到匿名插槽的内容 --><p>这是主要内容</p><!-- 插入到具名插槽 footer 的内容 --><template #footer><p>这是底部内容</p></template></MyComponent></div>
</template><script setup>
import MyComponent from './components/MyComponent.vue';
</script>

在父组件中，使用 <template #插槽名> 语法来指定内容要插入到哪个具名插槽中，# 是 v-slot: 的缩写。

3. 作用域插槽

作用域插槽允许父组件在插入内容时访问子组件的数据。

子组件（MyComponent.vue）

<template><div><!-- 作用域插槽，向父组件暴露数据 --><slot :message="message"></slot></div>
</template><script setup>
import { ref } from 'vue';
const message = ref('这是子组件的数据');
</script>

在子组件中，通过 :message="message" 将 message 数据传递给插槽，这样父组件就可以使用这个数据。

父组件（App.vue）

<template><div><MyComponent><!-- 接收子组件传递的数据 --><template #default="{ message }"><p>{{ message }}</p></template></MyComponent></div>
</template><script setup>
import MyComponent from './components/MyComponent.vue';
</script>

在父组件中，使用 <template #default="{ 数据名 }"> 语法来接收子组件传递的数据，#default 用于匿名插槽的作用域插槽。