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

Question

I'm new to Vue.js.

I want to register a local component as described over here:

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

The only issue is that I need to register a component to an existing Vue instance not while creating a new instance something like:

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

I have tried Vue.extend for that, but it is not working.

Edit:

Why I need this:

I'm creating a 3rd party package which will have that component. The framework on which this package is going to be installed will already have Vue.js included and a Vue instance. So if I include my package's JS before framework's JS, then it will give me Vue is undefined and if I include my package's JS after framework's JS, then it will give me component error as it has to be registered before the Vue instantiation.

Answer 1

Global components should be declared before new instance construct.

 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>

You don't have access to the C component from within your app2

Answer 2

You can't add components to an instance like that. All you can do it adding them to the Vue constructor like usual:

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

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

See a demo here: https://jsfiddle.net/Linusborg/kb9pbecq/

Answer 3

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

Answer 4

Basically, you can not register a component to a existing Vue instance while it was already rendered.But you can register a component before the Vue instance mounted into the dom element.

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

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

or

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

Define the component first and then implement it.