slot都是用在子組件的原因

這篇文章給大家分享的是有關slot都是用在子組件的原因的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

使用slot場景一：

子組件Minput.vue

<input type='text'/>

　父組件 Minput

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

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

如果現在想在里面把文字渲染出來怎么辦

好 用slot

子組件

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

　這樣的話，父組件的里面的文字就可以渲染出來

場景二：具名插槽

子組件 he.vue

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

　父組件

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

　　渲染出來的結果就是

<header><h2>hello world</h2></header>

場景三

子組件 child

<div>
    <h2>這是h2</h2>
    <slot>這是分發內容,只有在沒有分發內容的情況下顯示</slot>
</div>

父組件

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

渲染出來就是

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

如果父組件

<child></child>

那么渲染出來的就是

<div><h2>這是h2</h2>這是分發內容，只有在沒有分發內容的情況下顯示</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>

感謝各位的閱讀！關于slot都是用在子組件的原因就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！