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

Posted 2022-01-02 GHUIJS

给自己的组件添加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写错或者写其他名字都不行