全局组件：

Vue.component

Vue.component('my-component-name', {  // ... 选项 ... })

<div id="app"> 
    <component-a></component-a> 
    <component-b></component-b> 
    <component-c></component-c> 
</div>

Vue.component('component-a', { /* ... */ })     
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ }) 
new Vue({ el: '#app' })

在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。

组件名称不推荐出现大写字母 使用 (-) + (小写)

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

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

子组件电泳父组件

1.prop的方式，:click='changeSize' 将函数直接传递到子组件 @click='change'

2.$emit的方式, @change='changeSize'，将函数名字传递到子组件@click='$emit("change2")'

 <div id="app">
        <div :style="{fontSize:size+'px'}">
            <btn-primary title="这是父组件传递的值" @change2="changeSize"></btn-primary>
        </div>
        <!-- <div>
            <btn-primary :title="msg" :change="changeSize"></btn-primary>
        </div> -->
    </div>
    
    <script>
        Vue.component("btn-primary", {
            data() {
                return {
                    count: 0
                }
            },
            props: ["title", "click2"],//同名变量
            methods: {
                click() {
                    this.count++;
                }
            },
            template: "<div><button @click='change'>{{count}}--{{title}}</button> <a href='' @click.prevent='$emit(\"change2\")'>65654</a></div>"
        })

        let vm = new Vue({
            el: "#app",
            data: {
                msg: "这是父组件的msg",
                size: 20
            },
            methods: {
                changeSize() {
                    this.size += 5;
                }
            }
        })

        // let vm2 = new Vue({
        //     el: "#app2",
        //     data: {

        //     }
        // })

    </script>