快捷導(dǎo)航

vue組件中實(shí)現(xiàn)嵌套子組件案例

更新時(shí)間：2020年08月31日 11:38:08 作者：開(kāi)心果小魏

這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

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

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

<template>
  <div class="cmt-container">
    <h3>發(fā)表評(píng)論</h3>
    <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;用戶(hù)：匿名用戶(hù)&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;用戶(hù)：匿名用戶(hù)&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;用戶(hù)：匿名用戶(hù)&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{
  h3{
    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、在需要使用組件的頁(yè)面中，先手動(dòng)導(dǎo)入 comment 組件

+ import comment from './comment.vue'

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

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

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

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

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

2.index.js里面的配置

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

4.怎么將newComponents引入到helloWorld呢?

5.頁(yè)面展示

以上這篇vue組件中實(shí)現(xiàn)嵌套子組件案例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

簡(jiǎn)單聊一聊axios配置請(qǐng)求頭content-type
最近在工作中碰到一個(gè)問(wèn)題,后端提供的get請(qǐng)求的接口需要在request header設(shè)置,下面這篇文章主要給大家介紹了關(guān)于axios配置請(qǐng)求頭content-type的相關(guān)資料,需要的朋友可以參考下
2022-04-04
可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫(xiě)這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下
2022-11-11
element-ui中樣式覆蓋問(wèn)題的方法總結(jié)
我們?cè)谑褂胑lement-ui的時(shí)候經(jīng)常會(huì)遇到需要修改組件默認(rèn)樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問(wèn)題的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-03-03
Vue echart實(shí)現(xiàn)柱狀圖,電池圖,3D柱圖和3D圓柱圖代碼詳解
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)echart繪圖代碼詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助
2022-01-01
vue中如何動(dòng)態(tài)綁定圖片,vue中通過(guò)data返回圖片路徑的方法
下面小編就為大家分享一篇vue中如何動(dòng)態(tài)綁定圖片,vue中通過(guò)data返回圖片路徑的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-02-02
Vue中$root的使用方法及注意事項(xiàng)
這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項(xiàng)的相關(guān)資料,vue中$root是用來(lái)訪(fǎng)問(wèn)根組件的,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2024-03-03
如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能(代碼示例)
Vue是一種流行的JavaScript框架,可以幫助開(kāi)發(fā)者建立高效的Web應(yīng)用程序,本文將為您介紹如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能,并為您提供具體的代碼示例,感興趣的朋友一起看看吧
2023-11-11
vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景
這篇文章主要介紹了vue動(dòng)態(tài)組件之:is在組件中的使用場(chǎng)景,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
Vue仿Bibibili首頁(yè)的問(wèn)題
這篇文章主要介紹了Vue仿Bibibili首頁(yè),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-01-01
深入Vue-Router路由嵌套理解
這篇文章主要介紹了深入Vue-Router路由嵌套理解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08