子組件

<template><div class="slotcontent"><ul><!--<slot></slot>--><li v-for="item in items">{{item.text}}</li></ul></div> </template><script>export default{data(){return{items:[{id:1,text:'第1段'},{id:2,text:'第2段'},{id:3,text:'第3段'},]}}}</script><style scoped></style>

父組件

<template><div><h2>首頁(yè)</h2><router-link to="/home/details">跳轉(zhuǎn)到詳情</router-link><p>父組件</p><slotshow><p>{{msg}}</p></slotshow></div> </template><script>import slotshow from '../components/slotshow'export default{data(){return{msg:"測(cè)試內(nèi)容"}},components:{slotshow}} </script><style></style>

這種情況是如果要父組件在子組件中插入內(nèi)容 ，必須要在子組件中聲明slot 標(biāo)簽 ，如果子組件模板不包含<slot>插口，父組件的內(nèi)容<p>{{msg}}</p>將會(huì)被丟棄。

當(dāng)slot存在默認(rèn)值<slot><p>默認(rèn)值</p></slot>，且父元素在<slotshow></slotshow>中沒(méi)有要插入的內(nèi)容時(shí)，會(huì)顯示<p>默認(rèn)值</p>（p標(biāo)簽會(huì)去掉），當(dāng)slot存在默認(rèn)值，且父元素在<child>中存在要插入的內(nèi)容時(shí)，則顯示父組件中設(shè)置的值，

具名slot

<slot> 元素可以用一個(gè)特殊的屬性 name 來(lái)配置如何分發(fā)內(nèi)容。多個(gè) slot 可以有不同的名字。具名 slot 將匹配內(nèi)容片段中有對(duì)應(yīng) slot 特性的元素

var childNode = {template: `<div class="child"><p>子組件</p><slot name="my-header">頭部默認(rèn)值</slot><slot name="my-body">主體默認(rèn)值</slot><slot name="my-footer">尾部默認(rèn)值</slot></div>`, }; var parentNode = {template: `<div class="parent"><p>父組件</p><child><p slot="my-header">我是頭部</p><p slot="my-footer">我是尾部</p></child></div>`,components: {'child': childNode}, };

仍然可以有一個(gè)匿名 slot，它是默認(rèn) slot，作為找不到匹配的內(nèi)容片段的備用插槽。匿名slot只能作為沒(méi)有slot屬性的元素的插槽，有slot屬性的元素如果沒(méi)有配置slot，則會(huì)被拋棄

var childNode = {template: `<div class="child"><p>子組件</p><slot name="my-body">主體默認(rèn)值</slot><slot></slot></div>`, }; var parentNode = {template: `<div class="parent"><p>父組件</p><child><p slot="my-body">我是主體</p><p>我是其他內(nèi)容</p><p slot="my-footer">我是尾部</p></child></div>`,components: {'child': childNode}, }; <p slot="my-body">插入<slot name="my-body">中，<p>我是其他內(nèi)容</p>插入<slot>中，而<p slot="my-footer">被丟棄

如果沒(méi)有默認(rèn)的 slot，這些找不到匹配的內(nèi)容片段也將被拋棄

var childNode = {template: `<div class="child"><p>子組件</p><slot name="my-body">主體默認(rèn)值</slot></div>`, }; var parentNode = {template: `<div class="parent"><p>父組件</p><child><p slot="my-body">我是主體</p><p>我是其他內(nèi)容</p><p slot="my-footer">我是尾部</p></child></div>`,components: {'child': childNode}, };

<p>我是其他內(nèi)容</p>和<p slot="my-footer">都被拋棄

作用域插槽

作用域插槽是一種特殊類(lèi)型的插槽，用作使用一個(gè) (能夠傳遞數(shù)據(jù)到) 可重用模板替換已渲染元素。

在子組件中，只需將數(shù)據(jù)傳遞到插槽，就像將 props 傳遞給組件一樣

<span style="font-size: 16px;"><div class="child"><slot text="hello from child"></slot> </div></span>

在父級(jí)中，具有特殊屬性 scope 的 <template> 元素必須存在，表示它是作用域插槽的模板。scope 的值對(duì)應(yīng)一個(gè)臨時(shí)變量名，此變量接收從子組件中傳遞的 props 對(duì)象.

var <span style="color: #ffffff;">childNode</span> = {template: `<div class="child"><p>子組件</p><slot xxx="hello from child"></slot></div>`, }; var parentNode = {template: `<div class="parent"><p>父組件</p><child><template scope="props"><p>hello from parent</p><p>{{ props.xxx }}</p></template></child></div>`,components: {'child': childNode}, };

如果渲染以上結(jié)果，得到的輸出是

【列表組件】

作用域插槽更具代表性的用例是列表組件，允許組件自定義應(yīng)該如何渲染列表每一項(xiàng)

var childNode = {template: `<ul><slot name="item" v-for="item in items" :text="item.text">默認(rèn)值</slot></ul>`,data(){return{items:[{id:1,text:'第1段'},{id:2,text:'第2段'},{id:3,text:'第3段'},]}} }; var parentNode = {template: `<div class="parent"><p>父組件</p><child><template slot="item" scope="props"><li>{{ props.text }}</li></template></child></div>`,components: {'child': childNode}, }; 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的vue 中slot 的具体用法的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。