Detailed explanation of the case of Vue child component calling parent component method

1. Call the parent component method directly through this.$parent.event in the child component

<!-- Parent component -->
<template>
	<div>
		<child></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components:
		child
	},
	methods: {
		fatherMethod() {
			console.log('test');
		}
	}
};
</script>

<!-- Child Component -->
<template>
  <div>
    <button @click="childMethod()">Click</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

2. Use $emit in the child component to trigger an event to the parent component, and the parent component listens to this event

<!-- Parent component -->
<template>
	<div>
		<child @fatherMethod="fatherMethod"></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components:
		child
	},
	methods: {
		fatherMethod() {
			console.log('test');
		}
	}
};
</script>

<!-- Child Component -->
<template>
	<div>
		<button @click="childMethod()">Click</button>
	</div>
</template>
<script>
export default {
	methods: {
		childMethod () {
			this.$emit('fatherMethod');
		}
	}
};
</script>

3. The parent component passes the method to the child component and calls the method directly in the child component

<!-- Parent component -->
<template>
	<div>
		<child :fatherMethod="fatherMethod"></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components:
		child
	},
	methods: {
		fatherMethod() {
			console.log('test');
		}
	}
};
</script>

<!-- Child Component -->
<template>
	<div>
		<button @click="childMethod()">Click</button>
	</div>
</template>
<script>
export default {
	props: {
		fatherMethod: {
			type: Function,
			default: null
		}
	},
	methods: {
		childMethod () {
			if (this.fatherMethod) {
				this.fatherMethod();
			}
		}
	}
};
</script>

This concludes this article about the detailed case of Vue child component calling parent component method. For more relevant Vue child component calling parent component method content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

Detailed example of how to change the value of a child component by triggering an event in the Vue parent component
Vue parent component calls child component function implementation
Detailed explanation of the event of triggering child components by clicking buttons in parent components in Vue
How to call child component functions in vue parent component
Vue3.0 triggers the parent component function in the child component

<<: Causes and solutions to the garbled character set problem in MySQL database

>>: Linux Jenkins configuration salve node implementation process diagram