How the vue child component invokes the parent component
This article introduces the knowledge of "how to call the parent component of the vue child component". Many people will encounter such a dilemma in the operation of the actual case, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!
Method: 1. The method of the parent component is called through "this.$parent.event" in the child component. 2. The child component triggers an event to the parent component with "$emit", and the parent component listens for the event. 3. The parent component passes the method into the child component, and the method can be called directly in the child component.
The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.
There are three ways for Vue subcomponents to call the parent component for reference
The first method is to call the method of the parent component directly in the child component through this.$parent.event
Parent component
Import child from'~ / components/dam/child'; export default {components: {child}, methods: {fatherMethod () {console.log ('test');}
Sub-component
Click
Export default {methods: {childMethod () {this.$parent.fatherMethod ();}
The second way is to trigger an event to the parent component with $emit in the child component, and the parent component listens for the event.
Parent component
Import child from'~ / components/dam/child'; export default {components: {child}, methods: {fatherMethod () {console.log ('test');}
Sub-component
Click
Export default {methods: {childMethod () {this.$emit ('fatherMethod');}
The third is that the parent component passes the method into the child component and calls the method directly in the child component.
Parent component
Import child from'~ / components/dam/child'; export default {components: {child}, methods: {fatherMethod () {console.log ('test');}
Sub-component
Click
Export default {props: {fatherMethod: {type: Function, default: null}}, methods: {childMethod () {if (this.fatherMethod) {this.fatherMethod ();}; this is the end of how a Vue child component calls the parent component. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!
