vue全局组件和局部组件用法

一般的应用，会拥有一个根实例，在根实例里面都是一个一个的组件。

因为组件是要嵌入到实例或者父组件里的，也就是说，组件可以互相嵌套

所有的组件最外层必须有一个根实例

组件分为：全局组件和局部组件

全局组件在任意的实例、父级组件中都能使用，局部组件只能在创建自己的父级组件或者实例中使用
全局注册组件：

Vue.component("zidingyi", {

	template: `<h1>我是一个全局组件</h1>`

})

使用全局组件: 在任意的vue视图中

<div id="app">
    <zidingyi></zidingyi>  <!--在第一个挂载点内使用-->
</div>

局部注册组件： 写在了某个Vue实例内 注意是components 带s 表示复数

var v1 = new Vue({
    el: "#app",
    // components配置项用于定义组件 因为写在了某个Vue实例内 所以只能在这个实例内使用 所以叫做局部组件
    components: {
        // 属性名表示组件名
        // 属性值是一个对象 
        zidingyi: {
            template: `<h1>我是一个局部组件</h1>`
        }
    }
})

 <div id="app">
        <zidingyi></zidingyi>  <!--在第一个挂载点内使用-->
    </div>

    <hr>
    <div id="app1">
        <zidingyi></zidingyi> <!--在第二个挂载点内不能使用第一个的组件-->
    </div>

局部组件只能在所在的Vue实例内使用

也可以这样定义

  // 定义全局组件
        Vue.component("zidingyi", {
            template: "#tpl",// template这里 既可以写具体的html标签字符串 也可以写选择器
        })
        var v1 = new Vue({
            el: "#app",
            data: {}
        })

 <div id="app">
        <zidingyi></zidingyi>
    </div>
    <!-- 可以把组件的html结构写在 template标签内,相当于是一个模板 通过id进行关联 -->
    <template id="tpl">
        <h1>我是一个组件</h1>
    </template>