Call parent method with component
I have a component and want to add a click listener that runs a method in the parent template in Vue. Is this possible?
-
Relying on calling
this.$parenthides the dependency and will break when you use component libraries which create a longer child hierarchyThe prefered methods are to either:
- Explicitly pass methods as properties to child components (the same as passing data props)
- Or declare global methods as mixins
From nils's answer on Vue.js inheritance call parent method:
Passing props (parent-child)
var SomeComponentA = Vue.extend({ methods: { someFunction: function () { // ClassA some stuff } } }); var SomeComponentB = Vue.extend({ props: [ 'someFunctionParent' ], methods: { someFunction: function () { // Do your stuff this.someFunctionParent(); } } });and in the template of SomeComponentA:
Use Mixins
If this is common functionality that you want to use in other places, using a mixin might be more idiomatic:
var mixin = { methods: { someFunction: function() { // ... } } }; var SomeComponentA = Vue.extend({ mixins: [ mixin ], methods: { } }); var SomeComponentB = Vue.extend({ methods: { someFunctionExtended: function () { // Do your stuff this.someFunction(); } } });
Further Reading
- Vue.js - Making helper functions globally available to single-file components
- Vue Docs Mixins
加载中...
- 热议问题