vue之组件间v-model通信

ゝ一世哀愁。 2023-07-24 14:50 12阅读 0赞

假如要使原生元素例如input输入框与实例数据双向绑定，我们都知道可以直接使用v-model指令。那如果是两个自定义组件间通信该如何使用v-model？

**首先要清楚v-model的原理：**

<input-con v-model="inputVal"></input-con>

等价于

<input-con :value="inputVal" @input="inputVal = $event.target.value"></input-con>

v-model的双向数据绑定是依靠`v-bind`绑定prop和`v-on`监听传值所完成的，那么就好办了。还是这个input框的例子：  
**子组件：**

<template>
    	<div>
    		<input type="text" v-model="inputValue" @input="inputAct"/>
    	</div>
    </template>
    <script>
    exprot default { 
    	name: "inputCon",
    	props: ["value"],
    	data() { 
    		return { 
    			inputValue: ''
    		}
    	},
    	methods: { 
    		inputAct() { 
    			this.$emit('input', this.inputValue)
    		}
    	},
    	watch: { 
    		value(newValue) { 
    			this.inputValue = newValue
    		}
    	}
    }
    </script>

**父组件：**

<template>
    	<div>
    		<inputCon v-model="inputVal"></inputCon>
    		<span>{ { inputVal}}</span>
    		<button @click="valChange">click</button>
    	</div>
    </template>
    <script>
    exprot default { 
    	data() { 
    		return { 
    			inputVal: ''
    		}
    	},
    	methods: { 
    		valChange() { 
    			this.inputVal = '666'
    		}
    	}
    }
    </script>

这套工作的重点在于给了子组件"`value`"这个prop值。原理是：**将父组件的数据和子组件身上的"`value`"用v-model建立双向绑定。  
1.子组件内的数据变动通过监听某事件(例子：input)向上传递改变组件自身的`value`，在v-model的v-on监听工作上传递给父组件的数据(例子：inputVal )；  
2.而父组件的数据变动在v-model的v-bind绑定工作上传给子组件的`value`prop值。但注意，此时数据变动仅仅只被`value`接收，最后一步还需要在子组件内用watch监听`value`将值传给组件内的数据(例子：inputValue )。**  
至此，组件间数据的v-model双向通信工作就完成了。