Shulou(Shulou.com)06/02 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.