插槽slot的作用
通過(guò)插槽slot可以實(shí)現(xiàn)在父組件中傳遞內(nèi)容到子組件的特定位置。譬如在開發(fā)通用組件的時(shí)候溶弟，開放修改通用組件內(nèi)容的地方，讓項(xiàng)目可以實(shí)現(xiàn)個(gè)性化瞭郑，這種情況就可以使用slot插槽技術(shù)辜御。
插槽slot種類
- 匿名插槽
- 具名插槽
- 作用域插槽
插槽slot的基本用法（匿名插槽）
## 子組件
<template>
<div class="container">
<el-row >
<el-col :span="24">
<slot>
<span style="color:orange;">子組件默認(rèn)顯示的內(nèi)容</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;">父組件顯示個(gè)性化內(nèi)容</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>
具名插槽（命名插槽）
命名插槽允許你在子組件中定義多個(gè)插槽，并在父組件中指定內(nèi)容應(yīng)傳遞到哪個(gè)插槽屈张。
## 子組件
<template>
<div class="container">
<el-row>
<el-col :span="24">
<slot name="firstSlot">
<span style="color:rgb(141, 255, 47);">子組件顯示第一行內(nèi)容</span>
</slot>
</el-col>
</el-row>
<el-row style="margin-top:30px;">
<el-col :span="24">
<slot name="secondSlot">
<span style="color:chocolate;">子組件顯示第二行內(nèi)容</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;">父組件顯示第一行內(nèi)容</span>
</template>
<template v-slot:secondSlot>
<span style="color:blue;font-weight:bold;">父組件顯示第二行內(nèi)容</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>
作用域插槽
作用域插槽允許你將子組件的數(shù)據(jù)傳遞給父組件的插槽內(nèi)容擒权。在子組件的 <slot> 元素上使用 v-bind 來(lái)傳遞數(shù)據(jù)。
## 子組件
<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>
具名插槽和作用域插槽結(jié)合版
插槽的使用更直觀
## 子組件
<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組件修改表格的自定義表頭
說(shuō)明：slot-scope
slot-scope 是 Vue.js 中用于定義作用域插槽（Scoped Slots）的一個(gè)指令阁谆。作用域插槽允許父組件訪問子組件插槽內(nèi)容中的數(shù)據(jù)碳抄。在 Vue 2.6.0+ 版本中，slot-scope 已經(jīng)被新的 v-slot 指令所替代场绿，但 slot-scope 仍然在許多舊代碼庫(kù)中可見剖效。例如：
<!-- 子組件 -->
<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>
注意
- 插槽的內(nèi)容只會(huì)在父組件中渲染，子組件不能控制插槽內(nèi)容的渲染邏輯焰盗。
- 使用插槽時(shí)贱鄙，要確保子組件的結(jié)構(gòu)和插槽的使用方式符合預(yù)期，避免出現(xiàn)內(nèi)容渲染不正確的情況姨谷。
