vue使用v-model实现父子组件传值之子父组件同步更新方式
作者：冰凉小脚
文章主要介绍了Vue2和Vue3中父子组件间通过props和emit实现双向绑定的方法,Vue2中,子组件通过props接收值,通过$emit触发change事件修改父组件数据；Vue3中方法类似,但语法略有不同
基于vue2和vue3两个版本的框架略显不同，所以我分开的来讲：
1、vue2
子组件（my-input.vue）：
<template>
<input type="text" :value="name" @input="inputChange" />
</template>
<script>
export default {
model: {
prop: 'name',
event: 'change'
},
props: {
name: {
type: String,
default: ''
}
},
methods: {
inputChange(e) {
this.$emit('change', e.target.value)
}
},
}
</script>父组件：
<template>
<my-input v-model="name" />
</template>
<script>
import MyInput from './my-input.vue'
export default {
data() {
return {
name: '张三'
}
},
}
</script>子组件：
- 使用model的name和event来指定变量名和修改事件名；
- 通过props接收一个值（举例name），
- 通过this.$emit执行change事件进行对数据进行修改，实现数据双向绑定功能；
父组件：组件直接使用 v-model绑定变量即可
2、vue3
子组件：
<template>
<input :value="modelValue" @input="updateValue" />
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
modelValue: {
type: String,
required: true
}
})
const emits = defineEmits(['update:modelValue'])
const updateValue = (event) => {
emits('update:modelValue', event.target.value)
}
</script>父组件：
<template>
<div>
<my-input type="text" v-model="name" />
</div>
</template>
<script setup>
import MyInput from './my-input.vue'
let name = ref('')
</script>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。