怎么用vue slot在子組件顯示父組件傳遞的模板

發(fā)布時(shí)間：2022-11-11 09:54:12 來(lái)源：億速云閱讀：79 作者：iii 欄目：開發(fā)技術(shù)

這篇“怎么用vue slot在子組件顯示父組件傳遞的模板”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“怎么用vue slot在子組件顯示父組件傳遞的模板”文章吧。

父組件使用沒(méi)有指定slot屬性，默認(rèn)為default

在slot中可以使用默認(rèn)值，如果父組件沒(méi)有傳遞對(duì)應(yīng)的slot，則會(huì)顯示默認(rèn)值

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="vue.js" charset="utf-8"></script>
</head>
<body>
  <div id="app">
    <modal>
      <!-- 調(diào)用父組件的方法 -->
      <h2 @click='click'>aaa</h2></modal>
    <modal>
      <h3>bbb</h3></modal>
    <modal>
      <!-- 使用slot設(shè)置模板中的名字,會(huì)插入到指定的slot中 -->
      <p slot='title'>hello</p>
      <p slot='content'>
        world
      </p>
    </modal>
    <modal></modal>
  </div>
  <template id="modal">
    <!-- 使用slot在子組件中顯示父組件傳過(guò)來(lái)的模板 -->
      <div>
        modal
        <slot name='default'>如果沒(méi)有會(huì)使用這個(gè)默認(rèn)值</slot>
      <h2>
        title:
        <slot name='title'>
        </slot>
      </h2>
      content:
      <slot name='content'></slot>
      </div>
    </template>
  <script type="text/javascript">
    let modal = {
      template: '#modal'
    }
    new Vue({
      el: '#app',
      components: {
        // es 簡(jiǎn)寫 ，只寫一個(gè)的意思為
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log('aaa')
        }
      }
    })
  </script>
</body>
</html>

以上就是關(guān)于“怎么用vue slot在子組件顯示父組件傳遞的模板”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

怎么用vue slot在子組件顯示父組件傳遞的模板

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽