CODEWITHSUNDEEP
javascriptvue.jsvue-component
Tsubaki Cerceis
Tsubaki Cerceis

Reputation: 63

How to inject Vue component using custom Vue instance

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.

Upvotes: 0

Views: 760

Answers (1)

Gabriel Willemann
Gabriel Willemann

Reputation: 1921

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.

Upvotes: 2

Related Questions