slot的局部作用域插槽

局部作用域插槽是Vue中的一种插槽类型，它允许父组件向子组件传递数据，并在子组件中使用这些数据。通过使用slot-scope指令，可以在子组件中访问父组件中的数据。具体来说，父组件可以将数据传递给子组件的插槽，然后在子组件中使用slot-scope指令来声明一个变量，该变量可以访问父组件中的数据。这样，子组件就可以使用这些数据来渲染自己的内容了。

举个例子，假设有一个父组件和一个子组件，父组件中有一个名为items的数组，子组件需要使用这个数组来渲染自己的内容。可以在父组件中使用<template>标签来定义一个插槽，并将items数组传递给该插槽：

<template v-slot:default="slotProps">
  <child-component :items="slotProps.items"></child-component>
</template>

在子组件中，可以使用slot-scope指令来声明一个名为slotProps的变量，该变量可以访问父组件中的items数组：

<template>
  <div v-for="item in slotProps.items" :key="item.id">{{ item.name }}</div>
</template>

<script>
export default {
  props: ['items']
}
</script>

这样，子组件就可以使用父组件中的数据来渲染自己的内容了。

相关问题

vue作用域插槽详解

### Vue.js 中的作用域插槽

#### 概念
作用域插槽是 Vue.js 提供的一种特殊类型的插槽，允许父组件访问子组件的数据并自定义其显示方式。通过这种方式，可以更灵活地控制子组件内部的内容呈现[^2]。

#### 使用方法
要创建一个具有作用域插槽的子组件，在该组件模板内需指定 `<slot>` 元素，并为其设置 `scope` 属性（在较新版本中已改为 `v-slot`）。此属性接收的对象包含了希望暴露给父级使用的变量或数据项。对于父组件而言，则是在调用子组件时利用具名插槽语法传入相应内容的同时获取这些被共享出来的值作为局部变量来使用[^3]。

#### 详细解释
当涉及到复杂场景下不同页面布局的需求变化时，例如展示编程语言列表既可以按照行排列也可以按照列罗列出来；此时如果单纯依靠常规插槽可能无法满足多样化的要求。而借助于带有参数传递功能的作用域插槽则能够很好地解决这个问题——即让子组件负责准备所需的信息集合，由外部决定具体怎样去展现它们[^5]。

#### 示例代码
下面是一个简单的例子展示了如何在一个名为 `ChildComponent` 的子组件里定义好可供外界读取的语言数组资源并通过作用域插槽将其开放出去；与此同时，在另一个地方实例化这个类别的时候可以根据实际需要选择不同的表现形式：

<!-- ChildComponent.vue -->
<template>
  <div class="child">
    <!-- 定义带作用域的默认插槽 -->
    <slot :languages="pLanguages"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pLanguages: ['Java', 'C++', 'JavaScript', 'Python', 'C语言', 'Go', 'C#']
    }
  }
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div id="app">
    <!-- 使用作用域插槽，以表格形式展示 -->
    <h3>水平方向展示：</h3>
    <ChildComponent v-slot="{ languages }">
      <ul style="display:flex;">
        <li v-for="(lang, index) in languages" :key="index">{{ lang }}</li>
      </ul>
    </ChildComponent>

    <!-- 使用作用域插槽，以列表形式展示 -->
    <h3>垂直列表展示：</h3>
    <ChildComponent v-slot="{ languages }">
      <ol>
        <li v-for="(lang, index) in languages" :key="index">{{ lang }}</li>
      </ol>
    </ChildComponent>

    <!-- 直接输出原始数组 -->
    <h3>数组形式展示：</h3>
    <pre>{{ JSON.stringify(pLanguagesFromSlot, null, 2) }}</pre>
    
    <!-- 将上述三种情况封装成单独的方法以便重复利用 -->
    <button @click="changeDisplayType('horizontal')">切换为横向显示</button>
    <button @click="changeDisplayType('vertical')">切换为纵向显示</button>
    <button @click="changeDisplayType('array')">查看原生数组</button>
  </div>
</template>

<script>
import ChildComponent from './components/ChildComponent';

export default {
  components: { ChildComponent },
  
  methods: {
    changeDisplayType(type){
      this.displayType = type;
    }
  },

  computed:{
    displayContent(){
      switch(this.displayType){
        case "horizontal":
          return (
            <ChildComponent scopedSlots={{
              default(props){return (<ul style="display:flex;"><li>{props.languages}</li></ul>)}
            }}/>
          );
          
        case "vertical":
          return(
            <ChildComponent scopedSlots={{
              default(props){return(<ol><li>{props.languages}</li></ol>)}
            }}/>
          );

        case "array":
          return this.pLanguages;

        default:
          break;
      }
    }
  }

};
</script>

Vue3 slot解构

### Vue3 中 Slot 的解构用法

在 Vue 3 中，`v-slot` 提供了一种更加简洁的方式来处理作用域插槽，并允许直接解构来自子组件的数据[^1]。

#### 基本概念
通过 `v-slot` 可以访问并解构子组件传递过来的属性。这使得模板中的代码更为清晰易读。

#### 示例说明

假设有一个名为 `<TodoList>` 的子组件，该组件会向父级暴露一些待办事项列表项的信息：

<!-- 子组件 TodoItem.vue -->
<template>
  <div class="todo-item">
    <!-- 插槽用于接收外部传入的内容 -->
    <slot :text="item.text"></slot>
  </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  item: Object,
});
</script>

那么，在父组件中可以这样使用这个带有作用域插槽的子组件，并利用 ES6 解构赋值简化写法：

<!-- 父组件 ParentComponent.vue -->
<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      <TodoItem :item="task">
        <!-- 使用具名插槽并通过解构获取参数 -->
        <template #[name]="{ text }">
          {{ text }}
        </template>
      </TodoItem>
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';
import TodoItem from './components/TodoItem.vue';

// 模拟的任务数组
const tasks = ref([
  { id: 0, text: "学习 JavaScript" },
  { id: 1, text: "掌握 Vue.js" }
]);
</script>

在这个例子中，`#[name]="{ text }"` 表达式的含义是从当前的作用域插槽对象里只提取出 `text` 属性作为局部变量来使用。这种方式让开发者能够专注于真正关心的数据部分而忽略其他无关紧要的东西。