vue3 父子组件 参数传递、方法调用

vue版本 3.2.25

父组件参数直接传递到子组件

父组件中定义参数

<!--父组件-->
<template>
	<!--父组件内容-->
	<!--调用子组件-->
	<plan-edit :upperComp="params"/>
</template>
<script setup>
	const params=()=>{
		x:1
	}
</script>

子组件定义props参数用于接收父组件的参数

<!--子组件-->
<template>
	<!--子组件内容-->
</template>
<script setup>
	const props = defineProps({
  		upperComp: Object,
	});
</script>

父组件传递到子组件（子组件嵌套）

父组件中定义参数，并使用 provide方法

<!--父组件-->
<template>
	<!--父组件内容-->
</template>
<script setup>
import {provide} from "vue";
	const params=()=>{
		x:1
	}
	// 分别向子孙组件传递参数--第一个参数：别名，第二个参数：需要传递的值
	provide('upperComp', params);
</script>

子组件使用inject接收父组件的参数

<!--子组件-->
<template>
	<!--子组件内容-->
</template>
<script setup>
import {inject} from "vue";
	const sub = inject('upperComp')
</script>