Vue 3 发射道具
Vue 3 emit prop
我试图在 VUE 3 中传递一个 emit prop,每次传递它时我仍然得到 false,并且 prop 无法切换。
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:
- 组件的道具名称
- Vue 2:
value
- Vue 3:
modelValue
- 组件发出的事件名称
- Vue 2:
input
- Vue 3:
update:modelValue
由于 value
在技术上是自定义的 v-model
道具名称,您必须调整发出的事件名称以匹配:
// emit('input', !props.value) ❌ wrong event name
emit('update:value', !props.value)
我试图在 VUE 3 中传递一个 emit prop,每次传递它时我仍然得到 false,并且 prop 无法切换。
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:
- 组件的道具名称
- 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)