How to get an instance of a Vue Component from inside a component

Question

From within my SectionComponent.vue file how can I grab an instance of a component I have imported?

import ButtonComponent from './ButtonComponent.vue';

To get an instance of it I want to do something like this:

buttonComponent = Vue.component(ButtonComponent);

I have my component listed/defined in my components array as ButtonComponent SO in theory I should be able to say:

let buttonComponent = Vue.component('button-component');

but that gives me undefined. What gives?

It does work if I register it globally and then grab an instance.

Is mounted not the right place to test this code? Is my mounted method fired before the imports? I am just looking for a bit of clarity here, if someone could explain I would appreciate it!

Are you actually trying to render the ButtonComponent in your SectionComponent Template? — tebs1200
Yes, I want to be able to dynamically add buttons to the section component. — LaziTurtle
You can just use your ButtonComponent in your template via a tag: <button-component/>. You can show the button conditionally using a v-if, or display an array of buttons using a v-for. — tebs1200
Basically, you're thinking about this in a very non-Vue way. WIth Vue, you do not imperatively add things to the DOM. Instead, you describe how the DOM should look in your template based on the state of your data, and Vue takes care of all the DOM manipulation for you. — Bert
@Bert Thank you that does actually help. Instead of adding buttons to my Sections component. I would have a button already in place and I would show this button when some action happens. Based on how many times that action happens I can track and show multiples of my button. And it all happens based on the data changing not on adding new instances of components. Because Vue already sort of does that for me? — LaziTurtle

Bert Bert · Accepted Answer · 2018-03-28T13:33:32

Vue is a declarative framework, meaning you don't really do things imperatively. Instead, you formulate your template as a representation of state, and then Vue takes care of the DOM manipulation for you.

Here is an example based on what you've described you want to do.

console.clear()
Vue.component("button-component", {
  // identifier is just a property telling us which button this is so we 
  // can distinguish between them
  props:["identifier"],
  template: `<button @click="onClick">I'm button {{identifier}}</button>`,
  methods: {
    onClick() {alert(this.identifier)}
  }
})

new Vue({
  el: "#app",
  data:{
    howManyButtons: 0
  },
  methods: {
    onAddButton(){
      this.howManyButtons++
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>

<div id="app">
  <button @click="onAddButton">Add a button component</button>
  <hr>
  <button-component v-for="btn in howManyButtons"
                    :identifier="btn"
                    :key="btn">
  </button-component>
</div>

In the above example we want to render a number of buttons based on how many times the "add a button" button has been clicked. To do that, we just increment a counter when the button is clicked. Then in the template we use the range variant of a v-for to render that many buttons.

<button-component v-for="btn in howManyButtons"
                  :identifier="btn"
                  :key="btn">
</button-component>

Hopefully this makes it clear that there is no point were we are telling Vue to add a button to the DOM. We just describe in the template that we want as many buttons as there are in our counter.

How to get an instance of a Vue Component from inside a component

2 Answers