vue组件

1.组件名称不推荐出现大写字母

2.Vue.component定义的是全局组件 Vue实例都可以使用

3.data必须是一个函数，返回值必须是一个对象

Vue.component("btn-primary",{
            data(){
                return{
                    count:0
                }
            },
            methods:{
                click(){
                    this.count++;
                }
            },
            template:"<button @click='click'>{{count}}</button>"
        })

组件是可复用的 Vue 实例，且带有一个名字。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

  <div id="app">
        <btn-primary></btn-primary>
        <btn-primary></btn-primary>
        <btn-primary></btn-primary>
    </div>

子组件调用父组件 1.prop的方式,:change='changeSize'属性，将函数直接传递到子组件@click='change' 2.$emit的方式@change2='changeSize'事件名称，将函数名字传递到子组件@click='$emit("change2")

 Vue.component("btn-primary",{
            data(){
                return{
                    count:0
                }
            },
            props:["title","color","change"],//同名变量
            methods:{
                click(){
                    this.count++;
                }
            },
            template:"<div><button @click='click'>{{count}}--{{title}}</button><a href=''@click.prevent='$emit(\"change2\")'>666</a></div>"
        })

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。