vue3父子组件数据传递

1、父组件向子组件传递数据

子组件想要使用父组件的数据，代码如下

父组件的代码

<Drawer :title="myTitle" :content="data" />

<script setup>
	const myTitle = "修改密码"
	const data = {username:"李白",password: "123456"}
</script>

如上所示Drawer是一个父组件，它向子组件传递了title和content两个数据

子组件的代码

<script setup>
	//接收父组件传递过来的数据
	const props = defineProps({
	    title:{
	        type: String,
	        default: "弹出层"
	    },
	    content:{
	        type: Object,
	        default: {}
	    }
	})
	console.log(props.title)
</script>

如上所示，子组件使用defineProps可以接收父组件传递过来的数据，其中type使我们指定父组件传递过来的数据类型，default是设置默认值

2、父组件向子组件传递方法

子组件调用父组件的方法代码如下

父组件代码

 <Drawer @eee="ddd" />
 <script setup>
	const ddd = ()=>{
    	console.log("这是父组件的方法");
	}
 </script>

如上所示，Drawer是一个父组件，它向子组件传递了一个eee方法

子组件代码

<script setup>
	//接收父组件的eee方法
	const emit = defineEmits(['eee'])
	const submit = ()=>emit('eee')
	//调用父组件的方法
	submit()
	//或者直接
	emit("eee")
	
</script>

3、子组件向父组件传递数据、方法

子组件代码

<script setup>
	
	 const username = "白居易"
	 const data = {id:1,name:"杜甫"}
	 function getMoney(){
        console.log("白居易赚了好多钱");
    }
	 // 向父组件暴露属性、方法
	 defineExpose({
	     username,
	     data,
	     getMoney
	 })
 </script>

如上所示，子组件向父组件传递了两个数据username、data和一个方法getMoney

父组件的代码

<Drawer ref="drawerRef" />
<script setup>
	const drawerRef = ref()
	//使用子组件传递的数据、方法
	function getdata(){
		console.log(drawerRef.value.username);
	}
    
</script>

如上代码所示，父组件使用子组件的时候只需要给这个子组件定义一个ref属性即可使用子组件传递过来的数据和方法了

注意：有时候我们想要在页面直接输出结果，但是在setup语法糖里面通过ref使用子组件的属性和方法需要在vue生命周期的onMounted之后使用，否则会报错

如下所示：想要在页面渲染的时候就输出数据，以下的写法会报错

<Drawer ref="drawerRef" />
<script setup>
	const drawerRef = ref()
	//使用子组件传递的数据、方法
	console.log(drawerRef.value.username);
</script>

上面错误的代码这样改写就没问题了，在组件挂载完毕之后再调用
需要先引入onMounted

<Drawer ref="drawerRef" />
<script setup>
	//引入onMounted
	import { onMounted } from 'vue';
	const drawerRef = ref()
	//在onMounted之后使用子组件传递的数据、方法
	onMounted(() => {
        console.log(drawerRef.value.username);
    }),
</script>