组件的基本应用
组件注册
Vue.component('todo-item',{
template:'<li>这是一个待办事项</li>'
})
使用
<ol>
<todo-item></todo-item>
</ol>
组建基础
基本示例
Vue.component('botton-counter',{
data:function(){
return {
count:0
}
}
template:'<button v-on:click='count++'>you clicked me {{count}} times</button'
})
使用
<div id='app'>
<button-counter></button-counter>
</div>
new Vue({el:'#components-demo'})
在组件中,依然可以使用data computed watch ** methods** 和生命周期函数。没有el
组件复用
<div id ='app'>
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
每个组件内的count都是独立存在的
data 必须是一个函数
因此 每个实例可以维护一份被返回对象的独立的拷贝!
单个根元素
父传子
++组件++
Vue.component('todo-item',{
props:['todo']
template:'<li>{{todo.text}}</li>'
)
var em = new Vue({
al:'#app7',
data:{
groceryList:[
{id:0,text:'蔬菜'},
{id:1,text:'水果'},
{id:2,text:'肉肉'},
]
}
})
todo-item 组件接受了一个prop 类似于自定义特性
++HTML++
<div id='app-7'>
<ol>
<todo-list
v-for='item in groceryList'
v-bind:todo='item'
v-bind:key = 'item.id'
></todo-list>
</ol>
</div>
子告诉父
简单
<div id='app'>
{{count}}
<my-button v-on:add='index+1'></button>
</div>
Vue.component('my-button',{
template:`<button v-on:click=$emit('add')>+</button>`
})
let vm = new Vue({
data:{
index:0
}
})
使用自定义的抛出值
比如我们需要加其他数字,可以在$emit(‘add’,N)
<my-button v-on:add='index+$event'></button>
Vue.component('my-button',{
template:`<button v-on:click=$emit('add',10)>+</button>`
})
在组件中使用v-model
在自定义组件中
<input v-model='searchText'>