為什麼slot都是用在子組件

這次帶給大家為什麼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中文網其他相關文章！