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版本的自定义组件。