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>