Vue全局组件及局部组件

作者: 最底层的技术渣 | 来源:发表于2019-05-17 00:35 被阅读0次

一、html文件

<div id="app">
    <div class="app">
        <alert></alert>
    </div>

    <div class="app2">
        <alert></alert>
    </div>
</div>

二、js文件

//相当于全局（不安全）第一种
/*Vue.component('alert',{
    template:'<button @click="onClick">提交</button>',
    methods:{
        onClick:function(){
            console.log('this is alert');
        }
    }
});*/


/*第二种局部*/
/*new Vue({
    el: '.app',
    components:{
        'alert': {
            template: '<button @click="onClick">提交</button>',
            methods: {
                onClick: function() {
                    console.log('this is alert');
                }
            }
        }
    }
});*/
//第三种 封装
var alert = {
    template: '<button @click="onClick">提交</button>',
    methods: {
        onClick: function() {
            console.log('this is alert');
        }
    }
};

new Vue({
    el:".app",
    components:{
        'alert': alert,
    },

});

new Vue({
    el:".app2",
    components:{
        'alert': alert,
    }
});

三、效果展示