我想在一个组件上添加一个v-model
,但我得到了以下警告:
[Vue warn]: Component emitted event "input" but it is neither declared in the emits option nor as an "onInput" prop.
下面是我的代码:
// Parent.vue
<template>
<h2>V-Model Parent</h2>
<Child v-model="name" label="Name" />
<p>{{ name }}</p>
</template>
<script setup>
import { ref } from 'vue'
import Child from './Child.vue'
const name = ref('')
</script>
// Child.vue
<template>
<input
class="input"
type="text"
:placeholder="props.label"
:value="props.value"
v-on:input="updateValue($event.target.value)"
/>
</template>
<script setup>
import { defineProps, defineEmit } from 'vue'
const props = defineProps({
label: String,
value: String
})
const emit = defineEmit('input')
function updateValue(value) {
emit('input', value)
}
</script>
我试图reproduce this tutorial,但我被卡住了,不知道我错过了什么。
我想在父项中显示{{ name }}
。vue组件。你知道怎么解决吗?
3条答案
按热度按时间xuo3flqw1#
在vue 3中,
value
的prop已更改为modelValue
,发出的事件input
已更改为update:modelValue
:Parent.vue
<Child v-model="name" label="Name" />
儿童
c7rzv4ha2#
我也喜欢用computed
pb3skfrl3#
我也有类似的问题,最后我得到了它的工作。这里有一个用于Vue 3和TypeScript的一个或多个复选框的解决方案。
解决方案:用于一个或多个复选框
CheckBox组件:
导入CheckBox并使用
导入其他组件中的CheckBox;