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

Questions:

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>
</li>

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.

Answers:

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

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

And in a method of the child component :

this.$emit('custom_event')

###

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>
   </li>

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…