如何解决Vue 3 发射道具
我试图在 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)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。