<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=<device-width>, initial-scale=1.0"> <script crossorigin="anonymous" integrity="sha512-BKbSR+cfyxLdMAsE0naLReFSLg8/pjbgfxHh/k/kUC82Hy7r6HtR5hLhobaln2gcTvzkyyehrdREdjpsQwy2Jw==" src="https://lib.baomitu.com/vue/2.6.12/vue.min.js"></script> <title>Document</title> </head> <body> <!-- view --> <div id="app"> <mycomponent v-for="item in items" v-bind:huang="item"></mycomponent> </div> <!-- viewmodel --> <script> //注册一个组件,组件来达到复用的作用 Vue.component("mycomponent",{ props: ['huang'], template: '<li>{{huang}}</li>' }) var vm = new Vue({ el:"#app", data:{ items:["Java","PHP","C++"] } }); </script> </body> </html>
Vue.component()，参数一是模板名，参数二是模板的相关属性，比如template，template的值就是替换该组件的真实标签；
注意，在Vue.component()是取不到Vue对象的数据的，只能组件标签先渠道数据，然后通过v-bind绑定组件prop提供的属性，才能设置进去。