Vue全局组件创建三种方法

 

 

            <my-com1></my-com1>
            <my-com2></my-com2>
            <template id="tmp1">
                <div id="">
                    <h1>外部定义组件的方式,拥有代码提示</h1>
                </div>
            </template>

 

 

    //1.1使用vue.extends 来创建全局的vue组件=============================================
    var com1 = Vue.extend({
        template: '<h3>使用vue.extends创建的组件</h3>' //指定组件要展示的html结构
    })

    //1.2使用vue.component('组件名称','模板对象')=============================================
    //如果定义全局组件时,组件名称使用了驼峰命名,,需要把大写的驼峰改成小写的字母同时需要修改两个单词之间用横线连接
    // Vue.component('myCom1', com1)
    Vue.component('myCom1', Vue.extend({
        template: '<h3>使用vue.extends创建的组件</h3>' //指定组件要展示的html结构
    }))

    //2.1 全局组件 组件中有且只有一个根元素
    Vue.component('myCom2', {
        template: '<div><h3>这是直接使用 vue.component 创建出来的组件</h3><span>123</span></div>'
    })

    //3.1 全局组件=============================================

  Vue.component('myCom3', { template:'#tmp1' })

 

 

转载于:https://www.cnblogs.com/xiaozhang666/p/11542102.html