How to inject Vue component using custom Vue instance

Question

I’ve seen some plugins that use custom Vue instance to invoke their own vue components. Something like

this.$activateLoadingBar.options({color:"Green", msg:"loading"})

Then a green loading bar pops up with “loading” as its message

I wanted to try and create myself. So I made a new component and declared a custom Vue instance by using

 Vue.prototype.$<name> = ...enter code here...

Then I am completely lost. What should I do so to get the result i needed ? I don’t know what is this method called, so i am unable search the internet.

tony19 · Accepted Answer · 2022-07-15 22:55:27Z

2

You can use the Global Event Bus. See the example below:

<template>
  <div>
    <button @click="sendMessageToChild">Send message to child</button>
    <HelloWord />
  </div>
</template>

<script>
import HelloWord from '@/components/HelloWord.vue';

export default {
  name: 'App',
  components: { HelloWord },
  methods: {
    sendMessageToChild() {
      this.$root.$emit('messageToChild', 'any text');
    },
  },
};
</script>

<template>
  <div>x = {{ message }}</div>
</template>

<script>
export default {
  name: 'HelloWord',
  data() {
    return {
      message: '',
    };
  },
  mounted() {
    this.$root.$on('messageToChild', text => (this.message = text));
  },
};
</script>

In this example, there is two components (a parent and a child). The parent component call the child.

But you can change this, the child can call the parent.

Otherhand, you can use Vuex or Vue.observable. But this is more complex if you are beginner.

edited Jul 15, 2022 at 22:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 11, 2020 at 12:03

Gabriel Willemann

1,9211 gold badge9 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tsubaki Cerceis Over a year ago

Thanks, i use Vuex , but i don't know how to call $root.$emit in Vuex.

Gabriel Willemann Over a year ago

If you use Vuex, you musn't call $root.$emit. With Vuex, you must create a state and a mutation. The Global Event Bus is indicated for simple cases.

Collectives™ on Stack Overflow

How to inject Vue component using custom Vue instance

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related