插槽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>

注意

• 插槽的内容只会在父组件中渲染，子组件不能控制插槽内容的渲染逻辑。
• 使用插槽时，要确保子组件的结构和插槽的使用方式符合预期，避免出现内容渲染不正确的情况。