vue組件中實現(xiàn)嵌套子組件案例
如何把一個子組件comment.vue放到一個組件中去
1、先創(chuàng)建一個單獨的 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; //縮進 } }} </style>
2、在需要使用組件的 頁面中,先手動導(dǎo)入 comment 組件
+ import comment from ’./comment.vue’
3、在父組件中,使用’components’ 屬性,將剛才導(dǎo)入的 comment 組件,注冊為自己的 子組件
4、將注冊子組件時候的,注冊名稱,以 標簽形式,在頁面中引用即可
補充知識:vue怎么將一個組件引入另一個組件?
項目是由的vue-cli搭建
1.這里有兩個組件,需求是把newComponents.vue里面的東西引入到helloWorld里面
2.index.js里面的配置
3.newComponents里面的內(nèi)容
4.怎么將newComponents引入到helloWorld呢?
5.頁面展示
以上這篇vue組件中實現(xiàn)嵌套子組件案例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. JSP動態(tài)網(wǎng)頁開發(fā)原理詳解2. XHTML 1.0:標記新的開端3. vue實現(xiàn)動態(tài)給id賦值,點擊事件獲取當(dāng)前點擊的元素的id操作4. python如何使用騰訊云發(fā)送短信5. .NET6使用ImageSharp實現(xiàn)給圖片添加水印6. python基于win32實現(xiàn)窗口截圖7. WML學(xué)習(xí)之六 事件8. 詳解Java關(guān)于時間格式化的方法9. Vue中使用Echarts儀表盤展示實時數(shù)據(jù)的實現(xiàn)10. PHP擴展之URL編碼、解碼及解析——URLs
