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>