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>