如何把一個(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;用戶：匿名用戶&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{ 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è)名稱，以 標(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è)參考，也希望大家多多支持好吧啦網(wǎng)。