vue元件中實現巢狀子元件案例
阿新 • • 發佈:2020-09-01
如何把一個子元件comment.vue放到一個元件中去
1、先建立一個單獨的 comment.vue 元件模板
<template> <div class="cmt-container"> <h3>發表評論</h3> <hr> <textarea placeholder="請輸入要BB的內容(最多吐槽120字)" maxlength="120"></textarea> <mt-button type="primary" size="large">發表評論</mt-button> <div class="cmt-list"> <div class="cmt-item"> <div class="cmt-title"> 第1樓 使用者:匿名使用者 發表時間:2012-12-12 12:12:12 </div> <div class="cmt-body"> 鋤禾日當午 符合 </div> </div> <div class="cmt-item"> <div class="cmt-title"> 第1樓 使用者:匿名使用者 發表時間:2012-12-12 12:12:12 </div> <div class="cmt-body"> 鋤禾日當午 符合 </div> </div> <div class="cmt-item"> <div class="cmt-title"> 第1樓 使用者:匿名使用者 發表時間:2012-12-12 12:12:12 </div> <div class="cmt-body"> 鋤禾日當午 符合 </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、在需要使用元件的 頁面中,先手動匯入 comment 元件
+ import comment from './comment.vue'
3、在父元件中,使用'components' 屬性,將剛才匯入的 comment 元件,註冊為自己的 子元件
4、將註冊子元件時候的,註冊名稱,以 標籤形式,在頁面中引用即可
補充知識:vue怎麼將一個元件引入另一個元件?
專案是由的vue-cli搭建
1.這裡有兩個元件,需求是把newComponents.vue裡面的東西引入到helloWorld裡面
2.index.js裡面的配置
3.newComponents裡面的內容
4.怎麼將newComponents引入到helloWorld呢?
5.頁面展示
以上這篇vue元件中實現巢狀子元件案例就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。