Access parent methods from component template in vuejs

Question

I have this code:

     new Vue({
        el: '#app',
        components: {
            'app-component': AppComponent
        },
        data: {
            message: 'Hello Vue.js!'
        },
        methods: {
            doSomething: function(){
                console.log('arrived!')
            }
        }
    })

How can I call "doSomething" method from AppComponent html template? like this:

<app-component>  
    <a href="#" v-on:click="doSomething()">text</a>
</app-component>

I get this error:

Uncaught TypeError: scope.doSomething is not a function

@maioman I got this: [Vue warn]: v-on:click="doSomething" expects a function value, got undefined (found in component: <app-component>) — Saeed Habibi
– Saeed Habibi, Commented May 14, 2016 at 10:17

chi-bd · Accepted Answer · 2016-05-15 06:42:24Z

12

try v-on:click="$parent.doSomething()"

answered May 15, 2016 at 6:42

chi-bd

1212 bronze badges

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

Comments

Saman · Accepted Answer · 2016-10-01 08:46:38Z

2

You can use this, based on this answer.

this.$parent.$options.methods.someParentMethod(data)

answered Oct 1, 2016 at 8:46

Saman

1281 silver badge8 bronze badges

Comments

Wiljan · Accepted Answer · 2016-05-14 11:28:16Z

1

You can use $dispatch from the child to trigger an event. Example:

// App component
<app-component>  
    <a href="#" v-on:click.prevent="$dispatch('do-something')">text</a>
</app-component>


// Parent
new Vue({
    el: '#app',
    components: {
        'app-component': AppComponent
    },
    data: {
        message: 'Hello Vue.js!'
    },
    events: {
        'do-something': function(){
            console.log('arrived!')
        }
    }
});

For more info on parent-child communication, check the documentation: http://vuejs.org/guide/components.html#Parent-Child-Communication

answered May 14, 2016 at 11:28

Wiljan

611 silver badge4 bronze badges

3 Comments

Saeed Habibi Over a year ago

Is there any solution without events? like prototyping Vue instance or etc.

Donkarnash Over a year ago

@saeedhbi I was trying to achieve something similar to you, i.e. put all the shared/common methods in a base component and then extend the base component to create new components which require the shared/common methods. Using mixins or custom plugin seems to be a more elegant solution. I am currently using the mixin approach, wherein I have all the shared methods in a mixin and whenever any component requires those shared methods, I use the mixin in that component. Mixins in Vue are just like trait in php. Hope it helps.

西門正 Code Guy - JingCodeGuy Over a year ago

in Vue 2.x, it is replaced by $emit, for details, please refer to Vue's migration note

Saeed Habibi · Accepted Answer · 2016-05-14 14:36:17Z

0

In addition to Wiljan response, I extend all components with new Vue instance that has methods and data. Now I access to methods and etc.

answered May 14, 2016 at 14:36

Saeed Habibi

3504 silver badges17 bronze badges

2 Comments

Linus Borg Over a year ago

Can you expand on that? I'm not sure, but it sounds like something one should definitely not do...

Saeed Habibi Over a year ago

@LinusBorg I don't want to share methods with props or events and these methods and data are global like user or company and must be shared all over application even components. And I don't want use them with $parent or $dispatch or etc. On each component I use "extends" property to get it and use on this. Now I access to method name into component template. I know components are isole and it is better to be isolate, But I think this does not defeats anything.

Collectives™ on Stack Overflow

Access parent methods from component template in vuejs

4 Answers 4

Comments

Comments

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related