Vue组件

组件的基本应用

组件注册

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'>