明輝手游網(wǎng)中心:是一個(gè)免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺(tái)!

為什么slot都是用在子組件

[摘要]這次給大家?guī)?lái)為什么slot都是用在子組件,使用slot子組件的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。使用slot場(chǎng)景一:子組件Minput.vue<input type=text/> 父組件 Minput <Minput>可以顯示嗎</Minput>...
這次給大家?guī)?lái)為什么slot都是用在子組件,使用slot子組件的注意事項(xiàng)有哪些,下面就是實(shí)戰(zhàn)案例,一起來(lái)看一下。

使用slot場(chǎng)景一:

子組件Minput.vue

<input type='text'/>

 父組件 Minput

<Minput>可以顯示嗎</Minput>

 這種情況下 Minput標(biāo)簽內(nèi)的文字是不會(huì)渲染出來(lái)的

如果現(xiàn)在想在里面把文字渲染出來(lái)怎么辦

好 用slot

子組件

<input type='text'/>
<slot></slot>

 這樣的話,父組件的里面的文字就可以渲染出來(lái)

場(chǎng)景二:具名插槽

子組件 he.vue

<header>
    <slot name='header'></slot>
</header>

 父組件

<he>
    <h1 name='header'>hello world</h1>
</he>

  渲染出來(lái)的結(jié)果就是

<header><h1>hello world</h1></header>

場(chǎng)景三

子組件 child

<div>
    <h1>這是h1</h1>
    <slot>這是分發(fā)內(nèi)容,只有在沒有分發(fā)內(nèi)容的情況下顯示</slot>
</div>

父組件

<child>
    <p>這是一段p</p>
    <p>兩段p</p>
</child>

渲染出來(lái)就是

<div><h1>這是h1</h1><p>這是一段p</p><p>兩段p</p></div>

如果父組件

<child></child>

那么渲染出來(lái)的就是

<div><h1>這是h1</h1>這是分發(fā)內(nèi)容,只有在沒有分發(fā)內(nèi)容的情況下顯示</div>

場(chǎng)景四:作用域插槽

<div class="child">
  <slot text="hello from child"></slot>
</div>

父組件

<div class="parent">
  <child>
    <template slot-scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

x渲染的話就是

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

相信看了這些案例你已經(jīng)掌握了方法,更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!

相關(guān)閱讀:

怎樣讓按鈕點(diǎn)擊后出現(xiàn)“點(diǎn)”的邊框

詳解瀏覽器渲染流程

input的文本框怎么做到和img驗(yàn)證碼

常用input文本框內(nèi)容自動(dòng)垂直居中并默認(rèn)提示文字單擊為空

以上就是為什么slot都是用在子組件的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!


網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ),涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。