vue組件中實(shí)現(xiàn)嵌套子組件案例
更新時間：2020年08月31日 11:38:08 作者：開心果小魏
這篇文章主要介紹了vue組件中實(shí)現(xiàn)嵌套子組件案例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
如何把一個子組件comment.vue放到一個組件中去
1、先創(chuàng)建一個單獨(dú)的 comment.vue 組件模板
<template>
<div class="cmt-container">
<h3>發(fā)表評論</h3>
<hr>
<textarea placeholder="請輸入要BB的內(nèi)容（最多吐槽120字）" maxlength="120"></textarea>
<mt-button type="primary" size="large">發(fā)表評論</mt-button>
<div class="cmt-list">
<div class="cmt-item">
<div class="cmt-title">
第1樓 用戶：匿名用戶 發(fā)表時間：2012-12-12 12:12:12
</div>
<div class="cmt-body">
鋤禾日當(dāng)午 符合
</div>
</div>
<div class="cmt-item">
<div class="cmt-title">
第1樓 用戶：匿名用戶 發(fā)表時間：2012-12-12 12:12:12
</div>
<div class="cmt-body">
鋤禾日當(dāng)午 符合
</div>
</div>
<div class="cmt-item">
<div class="cmt-title">
第1樓 用戶：匿名用戶 發(fā)表時間：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、在需要使用組件的 頁面中，先手動導(dǎo)入 comment 組件
+ import comment from './comment.vue'
3、在父組件中，使用'components' 屬性，將剛才導(dǎo)入的 comment 組件，注冊為自己的 子組件
4、將注冊子組件時候的，注冊名稱，以 標(biāo)簽形式，在頁面中引用即可
補(bǔ)充知識：vue怎么將一個組件引入另一個組件?
項(xiàng)目是由的vue-cli搭建
1.這里有兩個組件,需求是把newComponents.vue里面的東西引入到helloWorld里面
2.index.js里面的配置
3.newComponents里面的內(nèi)容
4.怎么將newComponents引入到helloWorld呢?
5.頁面展示
以上這篇vue組件中實(shí)現(xiàn)嵌套子組件案例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
最近在工作中碰到一個問題,后端提供的get請求的接口需要在request header設(shè)置,下面這篇文章主要給大家介紹了關(guān)于axios配置請求頭content-type的相關(guān)資料,需要的朋友可以參考下2022-04-04
可能是全網(wǎng)vue?v-model最詳細(xì)講解教程
Vue官網(wǎng)教程上關(guān)于v-model的講解不是十分的詳細(xì),寫這篇文章的目的就是詳細(xì)的剖析一下,下面這篇文章主要給大家介紹了關(guān)于vue?v-model最詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下2022-11-11
我們在使用element-ui的時候經(jīng)常會遇到需要修改組件默認(rèn)樣式,下面這篇文章主要給大家介紹了關(guān)于element-ui中樣式覆蓋問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
Vue echart實(shí)現(xiàn)柱狀圖,電池圖,3D柱圖和3D圓柱圖代碼詳解
這篇文章主要為大家介紹了Vue實(shí)現(xiàn)echart繪圖代碼詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
vue中如何動態(tài)綁定圖片,vue中通過data返回圖片路徑的方法
下面小編就為大家分享一篇vue中如何動態(tài)綁定圖片,vue中通過data返回圖片路徑的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要給大家介紹了關(guān)于Vue中$root使用方法及注意事項(xiàng)的相關(guān)資料,vue中$root是用來訪問根組件的,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能(代碼示例)
Vue是一種流行的JavaScript框架,可以幫助開發(fā)者建立高效的Web應(yīng)用程序,本文將為您介紹如何在Vue中實(shí)現(xiàn)登錄驗(yàn)證功能,并為您提供具體的代碼示例,感興趣的朋友一起看看吧2023-11-11
這篇文章主要介紹了vue動態(tài)組件之:is在組件中的使用場景,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue仿Bibibili首頁,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-01
這篇文章主要介紹了深入Vue-Router路由嵌套理解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08