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