Home » vue » Update parent components from child component in Vue.js

Update parent components from child component in Vue.js

Posted by: admin November 26, 2021 Leave a comment


I have the main Component using the Parent component having a dynamic component using the v-bind:is=”componentName” just like:

Parent template:

<li class='list-inline-item g-mx-4 g-mt-10'>
  <component v-bind:is="componentName"></component>

and code:

 export default {

    data: function(){
             return  {
               componentName : "componentA"
    components: {
        componentA: {
            template : "<div>A</div>" 
        componentB: {
          template : "  <div>B</div>"

I would like to switch the component to show sending a new value to componentName from a child component but I’m not sure if I have to use emit or watch or…?

I would like to do that without vuex.


Yes, use emit.
In your parent component do something like :

<child-component @custom_event='methodName' />

And in a method of the child component :



I got solved it using emit as Loric suggested.

My new parent component is now:

   <li class='list-inline-item g-mx-4 g-mt-10'>
       <component v-bind:is="componentName"  @custom_event='updateTest'></component>

and it has a mtehod like:

 methods: {
        updateTest() {
            const v = document.querySelector('meta[name="login-status"]').getAttribute("content");
            this.componentName =  (v!="") ? "componentLoggedOn" : "componentLoggedOff";

then I have add a new method to componentA component ( the one created inline) having:

this.$emit(‘custom_event’, param);

Note: param is not used but just in case…