Vue 全局组件和局部组件

vue、js、html文件都可以注册全局组件和局部组件

• 全局组件

全局化注册是在构造器外部用Vue.component进行注册
注意注册时机
Vue.component('global-div', {
    template: `<h1>我是global-div全局组件, 注意注册时机</h1>`
})
    var globalExtendDiv = Vue.extend({
        template: '<h1>我是global-extend-div全局组件</h1>'
    })
    Vue.component('global-extend-div', globalExtendDiv)

• 局部组件

直接在components书写
    export default {
        el: 'vue_global_api',
        components: {
            'local-div': {
                template: `<h1>我是local-div局部组件</h1>`,
            }
        }
    }
使用Vue.extend
注意位置，一定写在挂载之前
    var local_extend_div = Vue.extend({
        template: `<h1>我是local_extend_div局部组件</h1>`,
    })
    export default {
        el: 'vue_global_api',
        components: {
            'local_extend_div': local_extend_div,
        }
    }

关于组件 查看另一篇 Vue 父组件和子组件之间那点儿破事儿

• vue-custom-element

具体查看GitHub

1、安装

npm install vue-custom-element —save

2、使用

import vueCustomElement from 'vue-custom-element'
Vue.use(vueCustomElement);
Vue.customElement('widget-vue', {
  props: [
    'prop1',
    'prop2',
    'prop3'
  ],
  data: {
    message: 'Hello Vue!'
  },
  template: '<p>{{ message }}, {{ prop1  }}, {{prop2}}, {{prop3}}</p>'
});