问题描述
我试图在 VUE 3 中传递一个发射道具,每次我通过它我仍然得到错误,并且道具无法切换。
Accordion.vue
<template>
<div class="flex" @click="toggleInfo()">
<slot></slot>
</div>
</template
<script>
export default {
props: {
value: {
required: true
}
},setup(props,{ emit }) {
const toggleInfo = () => {
emit('input',!props.value)
}
return {
toggleInfo
}
}
}
</script>
App.vue
<accordion v-model:value="isOpen">
...// just data
</accordion>
<script>
import { ref } from 'vue'
import accordion from '../components/Accordion.vue'
export default {
components: {
accordion
},setup() {
const isOpen = ref(false)
return {
isOpen
}
}
}
</script>
每次我点击toggleInfo,我仍然得到:
false
我的发射不起作用。
解决方法
v-model
wiring has changed in Vue 3:
-
组件的 prop 名称
- Vue 2:
value
- Vue 3:
modelValue
- Vue 2:
-
组件发出的事件名称
- Vue 2:
input
- Vue 3:
update:modelValue
- Vue 2:
由于 value
在技术上是自定义的 v-model
道具名称,因此您必须调整发出的事件名称以匹配:
// emit('input',!props.value) ❌ wrong event name
emit('update:value',!props.value)