实现环境: vue3
实现思路:双向绑定
1.效果:
- 父传子 父组件中通过v-model绑定的数据直接影响 input框的value值
- 子传父 子组件在用户输入新内容的时候 始终可以把新内容同步到父组件中v-model绑定的数据上
2.实现
-
父传子 绑定了一个名称 modelValue的属性
初始化的时候就以传下来的prop作为默认值 -
子传父 每次用户输入新写的东西都需要同步到父组件中
绑定了一个名称为update:modelValue
emit
Vue3 中 modelValue说明
落地代码
1. 封装组件
<template>
<div>
<input type="text" :value="txtValue" @input="msgChange">
</div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
name: 'h-input',
props: {
modelValue: {
type: String
}
},
setup (props, { emit }) {
// 接收父组件传来的内容
const txtValue = ref(props.modelValue)
watch(() => {
return props.modelValue // 监听 props.modelValue 的变化
}, () => {
txtValue.value = props.modelValue // 当 props.modelValue 发生变化的时候,修改 txtValue 的值
})
// 将修改的内容传给父组件
function msgChange (e) {
emit('update:modelValue', e.target.value)
}
return { txtValue, msgChange }
}
}
</script>
2. 使用组件
<template>
<h-input v-model="msg" ></h-input>
</template>
<script>
import { ref } from 'vue'
export default {
setup () {
const msg = ref('this is msg')
return { msg }
}
}
</script>