vue 全局組件和局部組件

組件分類：全局組件 局部組件

​ 全局組件在任何地方都可以使用
​ 局部組件只能在當前實例裏用

全局組件

Vue.component("組件名稱",{
​    data(){
​        return {
​            msg:"123"
​        }
​    },
​    methods:{
​        fn(){
​            console.log(this.msg)
​        }
​    },
​    template:`<div><span @click="fn">{{msg}}</span></div>`     【注】：只有一個根
})

局部組件

new Vue({
    el:"#app",
    component:{
        "one":{
            data(){
                return {
                    msg:"123"
                }
            },
            methods:{},
            template:`<h1>123</h1>`
        }
    }
})

組件的使用 <組件名稱></組件名稱>

new Vue({
​    template:"<h1>如果實例裏面存在template的話，你的頁面只會渲染template </h1>"
}).$mount("#app")