我刚刚发现在Vue 3中,v-model
没有对子Component
进行响应性/React性工作。
此代码将更新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
数据没有更新,与前一个不同。
有什么解决方案或至少参考我试图实现什么?
5条答案
按热度按时间yqyhoc1h1#
你不能指望
v-model
隐式地为你更新底层元素。换句话说,你仍然需要在组件本身内处理它,并将modelValue
公开为一个道具,这样才能真正工作。hmae6n7t2#
使用Vue3
script setup
语法cxfofazt3#
VueUse帮助器
useVModel
可以简化处理子组件中的v-model
,请参阅https://vueuse.org/core/usevmodel/#usagejobtbby34#
使用
OPTIONS API
语法hjqgdpho5#
在vue2中,这个东西起作用了:
您的InputText组件
父组件