什么是插槽？
插槽就是子組件中的提供給父組件使用的一個(gè)占位符，用 表示，父組件可以在這個(gè)占位符中填充任何模板代碼，如 HTML、組件等，填充的內(nèi)容會(huì)替換子組件的標(biāo)簽。插槽顯不顯示、怎樣顯示是由父組件來(lái)控制的，而插槽在哪里顯示就由子組件來(lái)進(jìn)行控制。
vue中插槽也是父子組件通訊的一種方式。
組件最大的特性就是復(fù)用性，插槽能大大提高組件的復(fù)用性。
- 通過(guò)插槽 ，父組件可以把一段（模板的）結(jié)構(gòu)傳遞給子組件 。
- 用于實(shí)現(xiàn)組件的內(nèi)容分發(fā), 通過(guò) slot 標(biāo)簽, 可以接收到寫在組件標(biāo)簽內(nèi)的內(nèi)容
- vue提供組件插槽能力, 允許開(kāi)發(fā)者在封裝組件時(shí)，把不確定的部分定義為插槽
組件插槽的基本使用
<div id="app">
<my-com>Hello </my-com>
<my-com>
<a href="">點(diǎn)擊</a>
</my-com>
<my-button>點(diǎn)擊</my-button>
<my-button>提交</my-button>
<my-button @click="num++">
<div>總共點(diǎn)擊了{(lán){num}}次</div>
</my-button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
<script>
var app=Vue.createApp({
data:function(){
return{
num:0
}
},
methods: {
},
});
app.component("MyCom",{
template:`<div class="my-com">
子組件
<div>
<slot></slot>
</div>
</div>`,
});
app.component("MyButton",{
template:`<button>
<slot></slot>
</button>`,
});
app.mount("#app");
</script>具名插槽
- 具有名字的插槽
- 使用 中的 “name” 屬性綁定元素
- 通過(guò)slot屬性來(lái)指定, 這個(gè)slot的值必須和下面slot組件得name值對(duì)應(yīng)上 如果沒(méi)有匹配到 則放到匿名的插槽中
<div id="app">
<my-com>
<!-- 具名插槽 -->
<template v-slot:header>頭部</template>
<template v-slot:default> 默認(rèn)插槽</template>
<!-- <template v-slot:footer>底部</template> -->
<!-- 簡(jiǎn)寫 v-slot用#代替-->
<template #footer>底部</template>
</my-com>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
<script>
var app=Vue.createApp({
data:function(){
return{
num:0
}
},
methods: {
},
});
app.component("MyCom",{
template:`<div class="my-com">
<div class="header">
<slot name="header"></slot>
</div>
<div class="body">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>`,
});
app.mount("#app");
</script>總之，slot存在于子組件，v-slot在父組件，最終頁(yè)面展示結(jié)果是父組件！?。?/p>
作用域插槽：父組件對(duì)子組件的內(nèi)容進(jìn)行加工處理。
作用域插槽也可以理解為帶數(shù)據(jù)的插槽，即帶參數(shù)的插槽，簡(jiǎn)單的來(lái)說(shuō)就是子組件提供給父組件的參數(shù)，該參數(shù)僅限于插槽中使用，父組件可根據(jù)子組件傳過(guò)來(lái)的插槽數(shù)據(jù)來(lái)進(jìn)行不同的方式展現(xiàn)和填充插槽內(nèi)容。
<div id="app">
<my-com>
<!--子給父?jìng)鳎焊附M件接受子組件傳過(guò)來(lái)的值 -->
<template v-slot:header="data">
<!-- data只能在當(dāng)前模板內(nèi)部使用 -->
頭部
{{data}}
<br>
{{data.msg}}
</template>
<!--解構(gòu)賦值： v-slot:default="msg,age" -->
<template v-slot:default="{msg:text,age}">
默認(rèn)插槽
<!--msg 別名text -->
{{text}}
{{age}}
</template>
<template #footer>底部</template>
</my-com>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
<script>
var app=Vue.createApp({
data:function(){
return{
num:0
}
},
methods: {
},
});
app.component("MyCom",{
template:`<div class="my-com">
<div class="header">
<slot name="header" :msg="msg" :age="age"></slot>
</div>
<div class="body">
<slot :msg="msg" :age="age"></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>`,
data(){
return{
msg:"Jack",
age:10,
}
}
});
app.mount("#app");
</script>結(jié)果：
父組件給子組件數(shù)據(jù)，在父組件可以通過(guò):data的形式實(shí)現(xiàn)：
<div id="app">
<my-com>
<template v-slot:header :data="datas">
<!-- data只能在當(dāng)前模板內(nèi)部使用 -->
頭部
{{datas}}
<br>
{{datas.msg}}
</template>
</my-com>
</div>補(bǔ)充：作用域插槽與element-plus的聯(lián)合使用文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-439962.html
<div id="app">
<el-table :data="tableData" style="width: 100%">
<el-table-column label="日期" prop="date" width="180">
</el-table-column>
<el-table-column label="名字" prop="name" width="180">
<template #default="{row}"><span>{{row.name}}</span></template>
</el-table-column>
<el-table-column label="地址" prop="address" width="180">
</el-table-column>
<el-table-column label="Operations">
<template #default="{row}">
<el-button @click="onClick(row)" type="success">詳情</el-button>
</template>
</el-table-column>
</el-table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.37/vue.global.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-plus/2.2.10/index.full.min.js"></script>
<script>
var app=Vue.createApp({
data:function(){
return{
num:0,
tableData:[
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2018-05-20',
name: 'Jack',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2020-05-04',
name: 'Rose',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2022-11-29',
name: 'Lucy',
address: 'No. 189, Grove St, Los Angeles',
},
]
}
},
methods: {
onClick(row){
console.log(row);
}
},
});
app.use(ElementPlus);//注冊(cè)組件
app.mount("#app");
</script>?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-439962.html
到了這里，關(guān)于vue組件間傳值之插槽的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
