组件注册，全局与局部

全局

关于全局注册，是 Vue.component 函数注册
比如

Vue.component("hello",{
    data: function () { //data必须是一个函数
        return {
            message: 'hello'
        }
    },
    template:'<div>{{message}}</div>'
})

之后就可以 new Vue({el: XXX}) 抛出

局部

全局注册的组件，在项目比较大组件比较多时候，会造成有些组件我不需要了，它因为是全局注册，依旧会下载
所以，针对这种情况，我们应该使用局部注册

同文件下

首先，我们用js对象模拟一个组件

let Ac = {
    template:'<p>hello</p>'
}

然后在它的父组件中就可以引用它

new Vue({
    el:"#login",
    components:{ //这个不能少
        Ac //也可以理解为'Ac':Ac
    }
})

然后就可以在父组件里使用

<div id="login">
        <Ac></Ac>
</div>

当然，如果不想写在

里面，写在父组件的 temple 属性下也是可以的
比如

new Vue({
    el:"#login",
    components:{
        Ac
    },
    template:'<Ac></Ac>'
})

写render，是这样的

    render:h => {
        return <Ac></Ac>
    }

从别的文件引入

有时候我们的组件很复杂，为了可读性，我们不应该把子组件和父组件的定义放在同一个js文件下
新创建一个Ac.js 文件

export default{
        template:'<p>hello component</p>'
}

然后在父组件的js文件下引入

import Ac from './component/Ac'

即可

局部组件的复用

在一个局部组件下引用另一个局部组件

let Ac = {
    template:'<p>hello</p>'
}
let Bc = {
    components:{ //重点在这里
        Ac
    },
    render: h=>{
        return (<div>
            <Ac></Ac>
            <p>Vue</p>
        </div>)
    }
}
new Vue({
    el:"#login",
    components:{
        Bc
    },
    render:h => {
        return <Bc></Bc>
    }
})