javascript - 将组件注册到现有的 Vue.js 实例

Question

我是 Vue.js 新手。

我想按照这里的描述注册一个本地组件:

https://v2.vuejs.org/v2/guide/components.html#Local-Registration

唯一的问题是我需要将组件注册到现有 Vue 实例，而不是在创建新实例时，例如:

const app = new Vue({
    el: '#app'
});
    
app.component({
    'my-component': {
         template: '<div>A custom component!</div>'
    }
});

我已经为此尝试了 Vue.extend，但它不起作用。

编辑:

为什么我需要这个:

我正在创建一个包含该组件的第三方包。要安装此包的框架将已经包含 Vue.js 和一个 Vue 实例。因此，如果我在框架的 JS 之前包含我的包的 JS，那么它会告诉我 Vue 是未定义的，如果我在框架的 JS 之后包含我的包的 JS，那么它会给我组件错误，因为它必须在 Vue 实例化之前注册。

Answer 1

全局组件应该在新的实例构造之前声明。

Vue.component('my-component-a', {
  template: '<div>A custom component A!</div>'
});

Vue.component('my-component-b', {
  template: '<div>A custom component B!</div>'
});

const app1 = new Vue({
    el: '#app1',
    template: '<div><my-component-a /><my-component-b /><my-component-c /></div>',
    components: {
      MyComponentC: {
        template: '<div>A custom component C!</div>'
      }
    }
});

const app2 = new Vue({
    el: '#app2',
    template: '<div><my-component-b /><my-component-a /><my-component-c /></div>'
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app1"></div>
<div id="app2"></div>

您无权从您的 app2 中访问 C 组件