Les composants parents et enfants de Vue3 s'appellent en détail

1. Introduction

Dans le développement de projets vue3, nous rencontrons souvent des scénarios dans lesquels les composants parents et enfants s'appellent. Parlons en détail des composants parents et enfants sous la forme de sucre de syntaxe de configuration.

2. Le composant parent appelle la méthode du composant enfant

2.1 Sous-composant Child.vue

<template>
	<div>我是子组件</div>
</template>
 
<script setup>
// 第一步：定义子组件的方法
const sayHello = (value) => {
    
    
	console.log(value)
}
// 第二部：暴露方法
defineExpose({
    
    
	sayHello 
})
</script>

2.2 Composant parent Father.vue

<template>
	<button @click="getChild">触发子组件方法</button>
	<child ref="childRef" />
</template>
<script setup>
import Child from './components/child.vue'
// 定义与 ref 同名变量
const childRef = ref(null)
const getChild = () => {
    
    
	// 调用子组件的方法或者变量，通过value
	childRef.value.hello("hello world！");
}
</script>

3. Le composant enfant appelle la méthode du composant parent

3.1 Composant parent Father.vue

<template>
	<child @sayHello="handle" />
</template>
 
<script setup>
	import Child from './components/child.vue';
	const handle = () => {
    
    
		console.log('子组件调用了父组件的方法')
	}
</script>

3.2 Sous-composant Child.vue

<template>
	<view>我是子组件</view>
	<button @click="sayHello">调用父组件的方法</button>
</template>
 
<script setup>
	const emit = defineEmits(["sayHello"])
	const sayHello = () => {
    
    
		emit('Hello World')
	}
</script>