Update parent components from child component in Vue.js

Question

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.

Loïc · Accepted Answer · 2019-05-23 12:40:56Z

1

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')

answered May 23, 2019 at 12:40

Loïc

12k2 gold badges35 silver badges52 bronze badges

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

1 Comment

Uncoke Over a year ago

Thanks Loïc! I have update my script using emit and it works very well! Simple but very helpful!

tony19 · Accepted Answer · 2022-07-16 02:55:21Z

1

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...

edited Jul 16, 2022 at 2:55

tony19

140k23 gold badges281 silver badges354 bronze badges

answered May 23, 2019 at 13:47

Uncoke

1,9224 gold badges33 silver badges63 bronze badges

3 Comments

Loïc Over a year ago

note that you can replace "custom_event" name with anything. For instance I have a component that is an ajax form, and it emits "submit" and "response". Also if you use v-bind you should use v-on to be consistent : Either : v-bind:is="componentName" v-on:custom_event='updateTest' or the short version : :is="componentName" @custom_event='updateTest'

Loïc Over a year ago

Also more globally you are missing something big about vuejs. You shouldn't check the status of someone logged in like that. login_status could be a variable in your child-component, which is not optimal. It could also be a variable in vue-x. Or it could even be a global variable of your view instance.

Uncoke Over a year ago

Thanks @Loïc. I agree with you. I'm new on vue and I'm working on a blueprint project. I'll introduce Vuex in my project very soon.

Collectives™ on Stack Overflow

Update parent components from child component in Vue.js

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related