首先利用寫一個靜態模板的組件

<div id = "app"><my-arti></my-arti> </div> <script>Vue.component('my-arti',{template:'<div style="border:1px solid black">'+'<span>date:2019年06月14日</span><br>'+'<span>count:3</span>'+'</div>'});let vm = new Vue({el:'#app',}); </script>

上述date和count屬性是變化的
可以使用props,來將其變為動態的.

<div id = "app"><my-arti :detail='article'></my-arti> </div> <script>Vue.component('my-arti',{props:['detail'],template:'<div style="border:1px solid black">'+'<span>date:' + detail.date +'<span><br>'+'<span>count:' + detail.count + 'span>'+'</div>'});let vm = new Vue({el:'#app‘，data:{article:{date:'2019年06月14日',count:'3',}}}); </script> // 通過:detail="article",將article傳入到組件my-arti中

寫好了模板,下面復用該模板.

<div id="app"><my-arti v-for ="item in articles" :details="item"></my-arti> </div> <script>Vue.component('my-arti',{props:['details'],template:'<div style="border: 1px solid black;margin-bottom:5px;">'+'<span>Date:{{details.date}}</span>'+'<span>Count:{{details.count}}</span>'+'</div>'})let vm = new Vue({el:'#app',data:{articles:[{date:'2019年06月14日',count:'3'},{date:'2019年06月13日',count:'0',},{date:'2019年06月12日',count:'1',}]}}); </script>

參考 https://mp.weixin.qq.com/s?__biz=MzA3MDg1NzQyNA==&mid=2649654486&idx=1&sn=d00b354ead8d81950186a6f03ed94931&chksm=872c4369b05bca7fd24f5a18e512c1b65825b708c05cd8981d78a2cc0c10e9071c89e6fd591a&scene=21#wechat_redirect

總結

以上是生活随笔為你收集整理的vue --- compoent妙用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。