给自己封装的组件添加v-model（vue3）

给自己的组件添加v-model还是非常必要，可提高组件的可用性，今天捣鼓了一下，做个记录：

父组件：

<template>
	<p>父组件</p>
	<div>父组件v-model变量:{{res}}</div>
	<my-child v-model="res"></my-child>
</template>
<script>
	import myChild from './components/child.vue'
	import { ref } from 'vue'
	export default {
		components:{
			myChild
		},
		setup() {
			let res = ref('父组件变量')
			
			return{
				res
			}
		}
	}
</script>

子组件代码：

<!-- child -->
<template>
	<p>子组件</p>
	<input type="text" @input="inputRes()" v-model="data.text" placeholder="哈哈哈" />
</template>
<script>
	import { reactive,ref } from 'vue'
	export default {
		props:{
			modelValue:{
				type:String,
				default:''
			}
		},
		setup(props,context){
			let data = reactive({
				text:'你好',
				modelRes:props.modelValue
			})
			
			function inputRes(){
				data.modelRes = data.text
				context.emit('update:modelValue',  data.modelRes )
			}
			
			return{
				data,
				inputRes
			}
		}

	}
</script>

 数据流向：

 当然，也不局限于表单事件：

<template>
	<p>父组件</p>
	<div>父组件v-model变量:{{data.resArray}}</div>
	<my-child v-model="data.resArray"></my-child>
</template>
<script>
	import myChild from './components/child.vue'
	import { ref,reactive } from 'vue'
	export default {
		components:{
			myChild
		},
		setup() {
			const data = reactive({
				resArray:[]
			})
			
			return{
				data
			}
		}
	}
</script>

<!-- child -->
<template>
	<p>子组件</p>
	<button type="button" @click="optArr">给数组push</button>
</template>

<script>
	import { reactive,ref } from 'vue'
	export default {
		props:{
			modelValue:{
				type:Array
			}
		},
		setup(props,context){
			let data = reactive({
				modelRes:props.modelValue
			})
			
			function optArr(){
				console.log(data)
				data.modelRes.push(1)
				context.emit('update:modelValue',  data.modelRes )
			}
			
			return{
				data,
				optArr
			}
		}

	}
</script>

效果展示： 

注意：

v-model绑定的变量默认由子组件的props的modelValue接收 ，写其他名字则接收不到，modelValue写错或者写其他名字都不行

2022.02.13记

之前写的有些片面：

v-model是可以写变量名的

<my-child v-model:ghui="data.ghui"></my-child>

并且一个组件也可以支持多个v-model，子组件emit的时候这样写即可

context.emit('update:ghui',  '哈哈哈' )