将组件注册到现有的 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，但它不起作用。

编辑：

为什么我需要这个：

我正在创建一个包含该组件的第 3 方包。 将要安装这个包的框架已经包含了 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 组件

Answer 2

您不能将组件添加到这样的实例中。 您可以像往常一样将它们添加到 Vue 构造函数中：

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

const app = new Vue({
    el: '#app'
});

在此处查看演示： https ://jsfiddle.net/Linusborg/kb9pbecq/

Answer 3

const app = new Vue({
  el: '#app',
  components: {
    'my-component': {template: '<div>Text in component</div>'}
   }
});

Answer 4

基本上，您不能在已经渲染的现有 Vue 实例中注册组件。但是您可以在 Vue 实例安装到 dom 元素之前注册组件。

// local component
var child = {
  template: '<div>A custom component!</div>'
}

const app = new Vue({
   el: '#app',
   components: {
     Child: child
  }
})

或者

// global component
Vue.component({
 'child': {
   template: '<div>A custom component!</div>'
 } })

先定义组件，然后实现它。