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

本文小編為大家詳細(xì)介紹“怎么使用vue中slot在子組件顯示父組件傳遞的模板”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“怎么使用vue中slot在子組件顯示父組件傳遞的模板”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)公司成都企業(yè)網(wǎng)站建設(shè)服務(wù)，提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)網(wǎng)站開(kāi)發(fā),網(wǎng)站定制,建網(wǎng)站,網(wǎng)站搭建,網(wǎng)站設(shè)計(jì),成都響應(yīng)式網(wǎng)站建設(shè)公司,網(wǎng)頁(yè)設(shè)計(jì)師打造企業(yè)風(fēng)格網(wǎng)站,提供周到的售前咨詢和貼心的售后服務(wù)。歡迎咨詢做網(wǎng)站需要多少錢(qián):18982081108

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

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

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

<!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)寫(xiě) ，只寫(xiě)一個(gè)的意思為
        // modal:modal
        modal
      },
      methods: {
        click() {
          console.log('aaa')
        }
      }
    })
  </script>
</body>
</html>

讀到這里，這篇“怎么使用vue中slot在子組件顯示父組件傳遞的模板”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁(yè)標(biāo)題：怎么使用vue中slot在子組件顯示父組件傳遞的模板
瀏覽路徑：http://bm7419.com/article2/gejoic.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、電子商務(wù)、靜態(tài)網(wǎng)站、網(wǎng)站制作、網(wǎng)站維護(hù)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

手機(jī)網(wǎng)站建設(shè)