2021-09-09 vue3在setup中实现父子组件的双向绑定

1. 父组件：引用custom-cell的子组件，这是自己写的一个自定义单元格，样式就不放出来

<template>
	<div>
	<!--引入子组件-->
		<custom-cell title="名字"  v-model:xx="list.name"></custom-cell>
	</div>
</template>
<script>
	import customCell from "@views/custom-cell/custom-cell.vue"
	import {reactive,watch} from "vue"
	export default{
		name:"test",
		components:{customCell},
		setup(){
		const list =reactive({
		name:"米老鼠",
		});
		watch(//此处只是用来监听看是否实现父子组件的双向绑定，父组件的值是否随着子组件的改变而改变
		()=>list.name,(nowVal,preVal)=>{
			console.log(nowVal)
		});
		return {list};
		}
}
	
</script>

2. 子组件：这里简单的写了一个组件，主要是阐述父子组件双向绑定的问题。子组件双向绑定的变量一定不要是给父组件传的属性名，不然就会报“(error Unexpected mutation of “xxx“ prop vue/no-mutating-props)”这样的错，我的理解大概是属性和绑定的变量不能是同一个。

<template>
	<div>
	<!--标题-->
	   <div>{{title}}</div>
	   <!--右边输入框-->
	   <input :pox='xx' v-model='cc' @input="changeXX"/>
	</div>
</template>
<script>
	import {reactive,toRefs} from "vue"
	export default{
		name:"custom-cell",
		components:{},
		props:{
		xx:String
		}
		setup(props,context){
		const data =reactive({
		cc:''
		});
		const qq=toRefs(props);
		data.cc=qq.xx.value;//这一步是初始化实现父传子
		const changXX=function(){
			console.log(data.cc);
			context.emit("update:xx",data.cc);
		};
		watch(//子组件的监听一定要有，不然后期父组件传值不会改变子组件的值，这里是父组件值发生改变时同步修改子组件显示的值
		()=>qq.xx.value,(nowVal,preVal)=>{
			console.log(nowVal);
			data.cc=qq.xx.value;
		});
		return {...toRefs(data),changeXX};
		}
}
	
</script>

3.运行结果：图一是初始化的界面，图二是我在测试时添加了一个定时器让他在界面出现后的2s后在父组件将名字改成“杨亚亚”，（这里代码没写定时器），测试时可以自行添加。这里就不贴动态改变input框的截图了，但是我这边已经测试成功。

4.总结：父子组件的双向绑定大概是props和emit的结合使用（专业术语我表达不好，毕竟还是个小白），主要属性名和变量名不可共用，子组件一定要监听属性值的改变，不然后面父组件改变值不会使子组件的值改变。

ps:不要嫌弃界面丑，这个只是我做的测试用的界面，不强求样式