[JavaScript知识库]vue3.0利用model实现父子组件双向数据绑定

父组件：

<template>
	<div class="home">
		<input type="text" v-model="mes">
		<child :num="mes" @seed="reals"></child>
	</div>
</template>

<script>
	import child from "../components/child.vue"
    import {getCurrentInstance,ref} from "vue";
	export default {
		// 在子组件用components
		components:{
			child
		},
		setup() {
			let mes=ref(9)
			let {proxy}=getCurrentInstance()
			
			function reals(data){
				console.log(data)
				proxy.mes=data
			}
			
			return {
				reals,
				mes
			};
		},
	};
</script>
<style>
	[v-cloak] {
		display: none !important
	}

	img {
		width: 400px;
		height: 300px;
	}
</style>

子组件：

<template>
	<input v-model="num" @input="real">
</template>

<script>
	import {getCurrentInstance,ref} from "vue";
	export default{
		props:{
			num:Number
			// 接收来的事件可以直接使用，不需要赋给变量在使用
		},
		
		setup(pro){
			let {proxy}=getCurrentInstance()
			console.log(pro.num)//父组件传递过来的参数
			
			function real(){
				proxy.$emit("seed",pro.num)
			}
			return{
				real
			}
			
		}
	}
</script>

<style scoped="scoped">
	input{
		border-color: red;
	}
</style>