使用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>
    <h1 name='header'>hello world</h1>
</he>

　　渲染出來的結果就是

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

場景三

子組件 child

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

父組件

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

渲染出來就是

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

如果父組件

<child></child>

那么渲染出來的就是

<p><h1>這是h1</h1>這是分發內容，只有在沒有分發內容的情況下顯示</p>

場景四:作用域插槽

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

父組件

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

x渲染的話就是

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

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

相關閱讀：

怎樣讓按鈕點擊后出現“點”的邊框

詳解瀏覽器渲染流程

input的文本框怎么做到和img驗證碼

常用input文本框內容自動垂直居中并默認提示文字單擊為空

以上就是為什么slot都是用在子組件的詳細內容，更多請關注php中文網其它相關文章！