组件可以扩展HTML元素,封装可重用代码。几乎任意类型的应用的界面都可以抽象为一个组件树。
1:全局组件。
指的是在全局定义的组件,注册的语法格式为:Vue.component(tagName,options) 调用时,直接在挂载点下使用<tagName></tagName>即可。
所谓全局,就是将可以在各个挂载点下可用。例:
<div id="app"><runoob></runoob></div>
<div id="app2"><runoob></runoob></div>
<script>
Vue.component("runoob",{template:'<h1>自定义的组件</h1>'});
new Vue({
el:'#app'
});
new Vue({
el:'#app2'
});
</script>
2:局部组件
与全局组件对应,局部组件只能在一个挂载点使用,即局部组件所在的根实例中可用。
<div id="app"><runoob></runoob></div>
<script>
var lacal = {
template:'<h1>自定义的组件</h1>'
}
new Vue({
el:'#app',
components{
'runoob': local
}
});
</script>
3:Prop
prop是父组件用来传递数据的自定义属性。
可以简单理解为,组件在配置选项options中定义props属性,props为一个字符串数组,每一个字符串都可以作为组件的一个属性。
父组件该属性中指定的值(一般都是根实例中data中的属性),等同于props属性的数组中对应的值。所以可以在子组件中进行绑定、{{}}取值等操作。
简单理解为:父组件需要通过props把数据传递给子组件,子组件可以显示的调用其中的prop。
这样我们在template属性对应的子组件中就可以使用这些属性。例:
<div id="app">
<child message="hello" message2="world"></child>
</div>
<script>
Vue.component('child',{
props:['message','message2'],
template:'<span>{{message}}'+' '+'{{ message2 }}</span>'
});
new Vue({
el:'#app'
});
</script>
这里需要指出,props数组中的值可以理解为是一个实例属性,完全可以使用this.message。这里的this指的是对应的根实例。
4:动态Prop
基本用法同Prop类似,只是不在组件中直接写属性,而是用v-bind:message进行动态绑定。例:
<div id="app">
<input v-model="parentMsg"/>
<br/>
<child v-bind:message="parentMsg"></child>
</div>
<script>
Vue.component('child',{
props:['message'],
template:'<input v-model="message"/>'
});
new Vue({
el:'#app',
data:{
parentMsg: '默认值'
}
});
</script>
值得注意的是,props中的值,即使被双向绑定,但是只有单向的作用,即改变子组件的值,不影响父组件。
注意,prop中属性的作用范围只在父组件内,超出就会出错。
一个循环小例子加深理解:
<div id="app">
<ol>
<todo-item v-for="site in sites" v-bind:item="site"></todo>
</ol>
</div>
<script>
Vue.component('todo-item',{
props:['item'],
template:'<li>{{item.name}}</li>'
});
new Vue({
el:'#app',
data:{
sites:[{name:'aaa'},{name:'bbb'},{name:'ccc'}]
}
});
</script>
5:Prop验证
组件可以为pops指定验证请求。这时props的值不是数组,而是对象。暂略。
6:自定义事件。
用来将子组件的数据传递回父组件。具体使用暂略。
番外篇:
看一个组件的示例:
Vue.component('button-counter',{
data:funtion(){
return { count:0 }
},
template :'<button v-on:click="count++">you click me {{count}} times.</button>
})
需要知道:组件是可复用的Vue实例,且带有一个名字。这里<button-counter>就是这个组件的名字。在new Vue({})创建的根实例中,可以把组件当作自定义的元素来使用。
作为Vue的实例,因此组件可以接受与new Vue({})相同的参数。比如data、computed、watch、methods、template以及生命周期钩子等等。但是,根实例特有的属性,如el,组件是不可用的。
组件可以被任意次的复用,每次调用都创建一个新的实例。
注意:组件的data必须是一个函数。而不是像根实例那样直接提供一个对象。目的是,可以在函数中维护一个被返回对象的独立的拷贝。此例中返回的是{count:0}对象。因此在复用的组件中,不会相互影响。这一点有一些模糊,先牢记。