您好,登錄后才能下訂單哦!
這篇文章主要介紹“slot使用實(shí)例分析”的相關(guān)知識(shí),小編通過(guò)實(shí)際案例向大家展示操作過(guò)程,操作方法簡(jiǎn)單快捷,實(shí)用性強(qiáng),希望這篇“slot使用實(shí)例分析”文章能幫助大家解決問(wèn)題。
使用slot場(chǎng)景一:
子組件Minput.vue
<inputtype='text'/>
父組件Minput
<Minput>可以顯示嗎</Minput>
這種情況下Minput標(biāo)簽內(nèi)的文字是不會(huì)渲染出來(lái)的
如果現(xiàn)在想在里面把文字渲染出來(lái)怎么辦
好用slot
子組件
<inputtype='text'/>
<slot></slot>
這樣的話(huà),父組件的里面的文字就可以渲染出來(lái)
場(chǎng)景二:具名插槽
子組件he.vue
<header>
<slotname='header'></slot>
</header>
父組件
<he>
<h2name='header'>helloworld</h2>
</he>
渲染出來(lái)的結(jié)果就是
<header><h2>helloworld</h2></header>
場(chǎng)景三
子組件child
<div>
<h2>這是h2</h2>
<slot>這是分發(fā)內(nèi)容,只有在沒(méi)有分發(fā)內(nèi)容的情況下顯示</slot>
</div>
父組件
<child>
<p>這是一段p</p>
<p>兩段p</p>
</child>
渲染出來(lái)就是
<div><h2>這是h2</h2><p>這是一段p</p><p>兩段p</p></div>
如果父組件
<child></child>
那么渲染出來(lái)的就是
<div><h2>這是h2</h2>這是分發(fā)內(nèi)容,只有在沒(méi)有分發(fā)內(nèi)容的情況下顯示</div>
場(chǎng)景四:作用域插槽
<divclass="child">
<slottext="hellofromchild"></slot>
</div>
父組件
<divclass="parent">
<child>
<templateslot-scope="props">
<span>hellofromparent</span>
<span>{{props.text}}</span>
</template>
</child>
</div>
x渲染的話(huà)就是
<divclass="parent">
<divclass="child">
<span>hellofromparent</span>
<span>hellofromchild</span>
</div>
</div>
關(guān)于“slot使用實(shí)例分析”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí),可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。