vue3+ts父子组件通信

一.父组件向子组件传参

//父组件
<div :name="name"></div>

//子组件
interface Props {
	name?: string;
}

//下面这个可要可不要，主要为了初始化参数
withDefaults(defineProps<Props>(), {
	name: 'morning君'
});


//如果存在异步传递数据的情况，需要在子组件加上watch操作
watch(
	() => [props?.name,props?.age],
	(newVal, oldVal) => {
			console.log('++',newVal[0],newVal[1]);    //参数依次放在数组中    
	},
	{deep:true}
);

二.子组件向父组件传参

 通过emits方法定义函数来传递

//子组件
const emits = defineEmits(['funcClick', 'loadMoreData']);

emits('funcClick', {
		data: mainItem,
		funcName: type
	});


//父组件

<children @click="funcClick"></children>


//传递的参数就包含在funcClick里面