vue3＜script setup＞中插槽的使用

news/2024/9/8 12:35:44

在 Vue 3 中，<script setup> 语法糖极大地简化了组件的编写方式，使得代码更加简洁。在使用 <script setup> 时，插槽（Slots）的使用方式和在常规 <script> 中类似，但可能需要稍微注意一些细节，尤其是在类型化模板编译（如果你使用 TypeScript）时。

基本使用

在 <template> 中定义插槽，然后在父组件中通过 <template v-slot:name> 或简写为 #name 来填充这些插槽。

子组件（ChildComponent.vue）:

<script setup>  
// 这里可以定义组件的逻辑，但插槽的声明主要在模板中  
</script>  <template>  <div>  <header>  <!-- 默认插槽 -->  <slot></slot>  </header>  <main>  <!-- 具名插槽 -->  <slot name="content"></slot>  </main>  </div>  
</template>

父组件中使用:

<template>  <ChildComponent>  <!-- 默认插槽 -->  <template>  <p>这是默认插槽的内容</p>  </template>  <!-- 具名插槽 -->  <template #content>  <p>这是名为 'content' 的插槽的内容</p>  </template>  </ChildComponent>  
</template>  <script>  
import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  }  
}  
</script>

插槽的作用域

还可以定义作用域插槽，使得子组件可以向插槽传递数据。

子组件（ChildComponent.vue）:

<script setup>  
import { ref } from 'vue';  const data = ref('来自子组件的数据');  
</script>  <template>  <div>  <!-- 作用域插槽 -->  <slot name="scoped" :userData="data"></slot>  </div>  
</template>

父组件中使用:

<template>  <ChildComponent>  <template #scoped="{ userData }">  <p>{{ userData }}</p>  </template>  </ChildComponent>  
</template>  <script>  
import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  }  
}  
</script>