我刚刚发现在 Vue3 中,v-model
对 child 没有响应/ react 性工作Component
.
此代码将更新 username
数据
<template>
<div>
<input type="text" v-model="username" placeholder="Insert your username" />
<p>{{ username }}</p>
</div>
</template>
<script>
// Home.vue
export default {
name: 'Home',
data() {
return {
username: 'admin'
}
}
}
</script>
如果我在 input
中输入内容, username
数据也会改变。但是,当我使用
Component
像这个例子:<template>
<input type="text" :class="'input-text ' + additionalClass" :placeholder="placeholder" />
</template>
<script>
// InputText.vue
import { defineComponent } from "vue"
export default defineComponent({
name: 'InputText',
props: {
placeholder: {
type: String,
default: ''
},
additionalClass: {
type: String,
default: ''
}
}
})
</script>
然后我更新了我的代码以使用 Component
.注:
Component
注册成功。<template>
<div>
<input-text v-model="username" :placeholder="`Insert your username`" />
<p>{{ username }}</p>
</div>
</template>
<script>
// Home.vue
export default {
name: 'Home',
data() {
return {
username: 'admin'
}
}
}
</script>
当我输入内容时,username
数据未更新,与上一个不同。是否有任何解决方案或至少引用我想要实现的目标?
最佳答案
你不能指望v-model
为您隐式更新基础元素。换句话说,您仍然需要在组件本身内处理它并公开 modelValue
作为真正起作用的 Prop 。像这样的东西:
<template>
<input
type="text"
@input="onChanged"
:value="modelValue"
:class="'input-text ' + additionalClass"
:placeholder="placeholder" />
</template>
<script>
// InputText.vue
import { defineComponent } from "vue"
export default defineComponent({
name: 'InputText',
emits: ['update:modelValue'],
props: {
modelValue: String,
placeholder: {
type: String,
default: ''
},
additionalClass: {
type: String,
default: ''
}
},
setup(props, { emit }) {
function onChanged(e) {
emit('update:modelValue', e.currentTarget.value);
}
return {
onChanged
}
}
})
</script>
关于javascript - Vue3 在子组件中使用 v-model,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64746051/