版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cygodwg/article/details/80779637
vue允许使用小型、独立和可复用的组建构建大型的应用。
vue一个组件本质上就是一个预定义的vue实例。
<body>
<div id="app">
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
});
var app = new Vue({
el:'#app'
});
</script>
</body>
如此方式，页面中使用定义的组件，将会使用组件定义的内容渲染，但是上述方式渲染内容不能够变化，
不够灵活。
我们稍作修改
<div id="app">
<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item
v-for="item in fruits" v-bind:todo='item' v-bind-key='item.id'></todo-item>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
Vue.component('todo-item', {
props:['todo'],
template: '<li>{{todo.text}}</li>'
});
var app = new Vue({
el:'#app',
data:{
fruits:[
{id:1, text:'苹果',},
{id:3, text:'桔子'}
]
}
});
</script>
此例子中在component中使用了一个能接受变量的props，模板中能使用props的属性
在html中，使用v-bind指令将代办项传到循环输出的每个组件，
v-for="item in fruits"循环遍历vue定义的fruits数组，
v-bind:todo="item"
将遍历获取的item绑定到props的todo，如此component将会灵活显示不同的值。
如此我们可是使用该特性制作vue版本的自定义组件。