為什麼slot都是用在子組件

php中世界最好的语言
發布: 2018-02-24 09:37:42
原創
1964 人瀏覽過

這次帶給大家為什麼slot都是用在子組件,使用slot子組件的注意事項有哪些,下面就是實戰案例,一起來看一下。

使用slot場景一:

子元件Minput.vue

<input type=&#39;text&#39;/>
登入後複製

 父元件Minput 

<Minput>可以显示吗</Minput>
登入後複製

 這種情況下  Minput標籤內的文字是不會渲染出來的

如果現在想在裡面把文字渲染出來怎麼辦

好用slot

子元件

<input type=&#39;text&#39;/>
登入後複製

 這樣的話,父元件的裡面的文字就可以渲染出來

場景二:具名插槽

子元件he.vue

<header>
    <slot name=&#39;header&#39;></slot>
</header>
登入後複製

 父元件

<he>
    <h1 name=&#39;header&#39;>hello world</h1>
</he>
登入後複製

  渲染出來的結果就是

<header><h1>hello world</h1></header>
登入後複製

場景三

子元件child

<div>
    <h1>这是h1</h1>
    <slot>这是分发内容,只有在没有分发内容的情况下显示</slot>
</div>
登入後複製

父元件

<child>
    <p>这是一段p</p>
    <p>两段p</p>
</child>
登入後複製

渲染出來就是

<div><h1>这是h1</h1><p>这是一段p</p><p>两段p</p></div>
登入後複製

如果父元件

<child></child>
登入後複製

那麼渲染出來的就是

<div><h1>这是h1</h1>这是分发内容,只有在没有分发内容的情况下显示</div>
登入後複製

場景四:作用域插槽

<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>
登入後複製

相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

怎麼讓按鈕點擊後出現「點」的邊框

詳解瀏覽器渲染流程

input的文字方塊怎麼做到和img驗證碼

#常用input文字方塊內容自動垂直居中並默認提示文字點選為空

#

以上是為什麼slot都是用在子組件的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板