溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

使用vue如何嵌套子組件

發(fā)布時(shí)間：2020-11-06 15:42:36 來源：億速云 閱讀：462 作者：Leah 欄目：開發(fā)技術(shù)

使用vue如何嵌套子組件？針對(duì)這個(gè)問題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問題的小伙伴找到更簡(jiǎn)單易行的方法。

如何把一個(gè)子組件comment.vue放到一個(gè)組件中去

1、先創(chuàng)建一個(gè)單獨(dú)的 comment.vue 組件模板

<template>
  <div class="cmt-container">
    <h4>發(fā)表評(píng)論</h4>
    <hr>
    <textarea placeholder="請(qǐng)輸入要BB的內(nèi)容（最多吐槽120字）" maxlength="120"></textarea>
    <mt-button type="primary" size="large">發(fā)表評(píng)論</mt-button>
    <div class="cmt-list">
      <div class="cmt-item">
        <div class="cmt-title">
          第1樓&nbsp;&nbsp;用戶：匿名用戶&nbsp;&nbsp;發(fā)表時(shí)間：2012-12-12 12:12:12
        </div>
        <div class="cmt-body">
          鋤禾日當(dāng)午 符合
        </div>
      </div>
      <div class="cmt-item">
        <div class="cmt-title">
          第1樓&nbsp;&nbsp;用戶：匿名用戶&nbsp;&nbsp;發(fā)表時(shí)間：2012-12-12 12:12:12
        </div>
        <div class="cmt-body">
          鋤禾日當(dāng)午 符合
        </div>
      </div>
      <div class="cmt-item">
        <div class="cmt-title">
          第1樓&nbsp;&nbsp;用戶：匿名用戶&nbsp;&nbsp;發(fā)表時(shí)間：2012-12-12 12:12:12
        </div>
        <div class="cmt-body">
          鋤禾日當(dāng)午 符合
        </div>
      </div>
    </div>
    <mt-button type="danger" size="large" plain>加載更多</mt-button>
  </div>
</template>
<script>
  
</script>
<style lang="scss" scoped>
.cmt-container{
  h4{
    font-size: 18px;
  }
  textarea{
    font-size: 14px;
    height: 85px;
    margin: 0;
  }
  .cmt-list{
    margin: 5px 0;
    .cmt-item{
      font-size: 13px;
      .cmt-title{
        background-color: #ccc;
      }
    }
    .cmt-body{
      line-height: 35px;
      text-indent: 2em; //縮進(jìn)
    }
  }
}
  
</style>

2、在需要使用組件的 頁面中，先手動(dòng)導(dǎo)入 comment 組件

+ import comment from './comment.vue'

3、在父組件中，使用'components' 屬性，將剛才導(dǎo)入的 comment 組件，注冊(cè)為自己的 子組件

4、將注冊(cè)子組件時(shí)候的，注冊(cè)名稱，以 標(biāo)簽形式，在頁面中引用即可

使用vue如何嵌套子組件

補(bǔ)充知識(shí)：vue怎么將一個(gè)組件引入另一個(gè)組件&#63;

項(xiàng)目是由的vue-cli搭建

1.這里有兩個(gè)組件,需求是把newComponents.vue里面的東西引入到helloWorld里面

使用vue如何嵌套子組件

2.index.js里面的配置

使用vue如何嵌套子組件

3.newComponents里面的內(nèi)容

使用vue如何嵌套子組件

4.怎么將newComponents引入到helloWorld呢&#63;

使用vue如何嵌套子組件

5.頁面展示

使用vue如何嵌套子組件

關(guān)于使用vue如何嵌套子組件問題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。

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

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手