vue前端開發(fā)自學(xué),插槽練習(xí)第二次,name屬性的使用!可以使用name屬性，來(lái)自定義一個(gè)名字，這樣，就可以在一個(gè)組件內(nèi)同時(shí)出現(xiàn)多個(gè)插槽的內(nèi)容了。在子組件內(nèi)接收的時(shí)候，很簡(jiǎn)答，只需要在slot標(biāo)簽里面加上name=“mz”；
下面看代碼。
<template>
<h3>App</h3>
<!-- <SlotBase>
<div>
<h3>標(biāo)題</h3>
<p>內(nèi)容</p>
</div>
</SlotBase> -->
<SlotTwo>
<template v-slot:header>
<h3>我是動(dòng)態(tài)數(shù)據(jù),{{message}}</h3>
</template>
<template v-slot:main>
<h4>我是靜態(tài)內(nèi)容來(lái)自插槽002</h4>
</template>
</SlotTwo>
</template>
<script>
import SlotBase from './components/SlotBase.vue'
import SlotTwo from "./components/SlotTwo.vue"
export default{
data(){
return {
message:"插槽內(nèi)容002"
}
},
components:{
SlotBase,
SlotTwo
}
}
</script>
這個(gè)內(nèi)容是app.vue入口文件的內(nèi)容源碼。下面看看，SlotTwo.vue里面的代碼情況。
<template>
<h3>插槽內(nèi)容練習(xí)2</h3>
<slot name="header">插槽默認(rèn)值1</slot>
<hr>
<slot name="main">插槽默認(rèn)值2</slot>
</template>如圖所示，里面定義了2個(gè)插槽，而且都分別對(duì)應(yīng)各自的name。這個(gè)name就是你在父組件里面定義那個(gè)屬性值：
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-786188.html
如圖所示，這個(gè)v-slot就是用來(lái)自定義插槽的名字的。很簡(jiǎn)單。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-786188.html
到了這里，關(guān)于vue前端開發(fā)自學(xué),插槽練習(xí)第二次,name屬性的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
