插槽slot的作用

通過插槽slot可以實現在父組件中傳遞內容到子組件的特定位置。譬如在開發通用組件的時候，開放修改通用組件內容的地方，讓項目可以實現個性化，這種情況就可以使用slot插槽技術。

插槽slot種類

• 匿名插槽
• 具名插槽
• 作用域插槽

插槽slot的基本用法（匿名插槽）

## 子組件
<template>
  <div class="container">
    <el-row >
      <el-col :span="24">
        <slot>
          <span style="color:orange;">子組件默認顯示的內容</span>
        </slot>
      </el-col>
    </el-row>
  </div>
</template>
    
<script>
  export default {
    name: "CalculateComponent",
    props: {},
    data() {
      return {};
    },
    methods: {},
  };
</script>
<style scoped></style>
 
## 父組件
<template>
    <div class="test">
      <calculate-component>
        <span style="color:red;font-weight:bold;">父組件顯示個性化內容</span>
      </calculate-component>
    </div>
</template>
    
<script>
  import CalculateComponent from '../../components/CalculateComponent.vue'
  export default {
    components: {
      CalculateComponent
    },
    name: "test",
    data() {
      return {
        
      };
    },
    watch: {},
    mounted() {},
    beforeCreate() {},
    created() {},
    methods: {},
  };
</script>
<style scoped></style>

具名插槽（命名插槽）

命名插槽允許你在子組件中定義多個插槽，并在父組件中指定內容應傳遞到哪個插槽。

## 子組件
<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <slot name="firstSlot">
          <span style="color:rgb(141, 255, 47);">子組件顯示第一行內容</span>
        </slot>
      </el-col>
    </el-row>

    <el-row style="margin-top:30px;">
      <el-col :span="24">
        <slot name="secondSlot">
          <span style="color:chocolate;">子組件顯示第二行內容</span>
        </slot>
      </el-col>
    </el-row>
  </div>
</template>
    
<script>
  export default {
    name: "CalculateComponent",
    props: {},
    data() {
      return {};
    },
    methods: {},
  };
</script>
<style scoped></style>

## 父組件
<template>
    <div class="test">
      <calculate-component>
        <template v-slot:firstSlot>
          <span style="color:red;font-weight:bold;">父組件顯示第一行內容</span>
        </template>
        <template v-slot:secondSlot>
          <span style="color:blue;font-weight:bold;">父組件顯示第二行內容</span>
        </template>
      </calculate-component>
    </div>
</template>
    
<script>
  import CalculateComponent from '../../components/CalculateComponent.vue'
  export default {
    components: {
      CalculateComponent
    },
    name: "test",
    data() {
      return {
        
      };
    },
    watch: {},
    mounted() {},
    beforeCreate() {},
    created() {},
    methods: {},
  };
</script>
<style scoped></style>

作用域插槽

作用域插槽允許你將子組件的數據傳遞給父組件的插槽內容。在子組件的 <slot> 元素上使用 v-bind 來傳遞數據。

## 子組件
<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <slot :userObj="userObj"></slot>
      </el-col>
    </el-row>
  </div>
</template>
    
<script>
  export default {
    name: "CalculateComponent",
    props: {},
    data() {
      return {
        userObj: { name: 'sunpy', age: 31 }
      };
    },
    methods: {},
  };
</script>
<style scoped></style>
   
## 父組件
<template>
    <div class="test">
      <calculate-component>
        <template v-slot:default="slotProps">
          <span style="color:red;font-weight:bold;">
            {{ slotProps.userObj.name }} - {{ slotProps.userObj.age }}
          </span>
        </template>
      </calculate-component>
    </div>
</template>
    
<script>
  import CalculateComponent from '../../components/CalculateComponent.vue'
  export default {
    components: {
      CalculateComponent
    },
    name: "test",
    data() {
      return {
        
      };
    },
    watch: {},
    mounted() {},
    beforeCreate() {},
    created() {},
    methods: {},
  };
</script>
<style scoped></style>

具名插槽和作用域插槽結合版

插槽的使用更直觀

## 子組件
<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <slot 
          name="userObjName"
          :userObj="userObj">
        </slot>
      </el-col>
    </el-row>
  </div>
</template>
    
<script>
  export default {
    name: "CalculateComponent",
    props: {},
    data() {
      return {
        userObj: { name: 'sunpy', age: 31 }
      };
    },
    methods: {},
  };
</script>
<style scoped></style>
    
# 父組件
<template>
    <div class="test">
      <calculate-component>
        <template v-slot:userObjName="slotProps">
          <span style="color:red;font-weight:bold;">
            {{ slotProps.userObj.name }} - {{ slotProps.userObj.age }}
          </span>
        </template>
      </calculate-component>
    </div>
</template>
    
<script>
  import CalculateComponent from '../../components/CalculateComponent.vue'
  export default {
    components: {
      CalculateComponent
    },
    name: "test",
    data() {
      return {
        
      };
    },
    watch: {},
    mounted() {},
    beforeCreate() {},
    created() {},
    methods: {},
  };
</script>
<style scoped></style>

插槽slot修改成熟組件的值

elementui組件修改表格的自定義表頭

• 說明：slot-scope
  slot-scope 是 Vue.js 中用于定義作用域插槽（Scoped Slots）的一個指令。作用域插槽允許父組件訪問子組件插槽內容中的數據。在 Vue 2.6.0+ 版本中，slot-scope 已經被新的 v-slot 指令所替代，但 slot-scope 仍然在許多舊代碼庫中可見。

• 例如：

<!-- 子組件 -->
<template>
  <slot :data1="value1" :data2="value2"></slot>
</template>

<script>
export default {
  data() {
    return {
      value1: 'First Value',
      value2: 'Second Value'
    };
  }
};
</script>

<!-- 父組件 -->
<template>
  <child-component>
    <template slot-scope="scope">
      <p>Data 1: {{ scope.data1 }}</p>
      <p>Data 2: {{ scope.data2 }}</p>
    </template>
  </child-component>
</template>

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

export default {
  components: {
    ChildComponent
  }
};
</script>

注意

• 插槽的內容只會在父組件中渲染，子組件不能控制插槽內容的渲染邏輯。
• 使用插槽時，要確保子組件的結構和插槽的使用方式符合預期，避免出現內容渲染不正確的情況。