webveuje/vue/组件.md

组件

组件是带有一个名字的可复用的vue实例，可以在new Vue创建的vue根实例中把定义的组件当做自定义元素来使用

组件构成

组件和new Vue接收的选项相同，都包括如下部分

• data

• methods

• computed

• watch

• components 组件内可以调用其他组件

  el 是根实例特有的选项，组建中不能出现el选项

组件定义和使用：

定义一个组件

需要把组件实例赋给一个变量

 let counter=Vue.component('counter', {
            data: function () {
                return {
                    count: 0
                }
            },
            methods:{
                add(){
                    this.count+=1
                }
            },
            template: '<button v-on:click="add">You clicked me {{ count }} times.</button>'
        })

声明组件中，组件内部的data必须是一个函数

因此 ，每个组件实例都是彼此独立的

使用它：

js部分：

 var app = new Vue({
            el: '#app',
            data: {
                selected: []
            },
            component:{
                counter
            }


        })

template (html)部分

<div id="app">
	<counter></counter>
	<counter></counter>
	<counter></counter>
	<counter></counter>
	
</div>

组件可以使用任意次数

这个例子中，id=app的部分叫做 父组件 counter指代的部分叫做 子组件