英文:
Updating parent values in Vue.js 3 doesn't work for composite API
问题
我有以下的Vue组件（基于PrimeVue）：
<template lang="pug">
Dialog(:visible="dShow" :modal="true" :draggable="false" header="My Dialog" :style="{ width: '50vw' }" @update:visible="hide()")
p test
template(#footer)
Button(label="Test")
</template>
<script setup>
import { ref, watch, defineEmits } from 'vue'
const emit = defineEmits(['update:show'])
const props = defineProps({
show: {
type: Boolean,
default: false
}
})
const dShow = ref(false)
watch(() => props.show, (newValue) => {
dShow.value = newValue
})
const hide = () => {
emit('update:show', false)
}
</script>
我的问题是，当我点击对话框的关闭图标时，会调用update:visible函数（hide），并发出update:show事件，但对话框不会消失。它仍然显示... 所以我认为父组件的值没有正确更新。你知道我在这里做错了什么吗？
我将该组件嵌入到父组件中，如下所示：
<template lang="pug">
Button(icon="icon pi pi-plus" @click="abcdef = true")
test(:show="abcdef")
</template>
<script setup>
import test from 'mydialog.vue'
const abcdef = ref(false)
</script>
英文:
I've the following vue component (based on PrimeVue):
<template lang="pug">
Dialog(:visible="dShow" :modal="true" :draggable="false" header="My Dialog" :style="{ width: '50vw' }" @update:visible="hide()")
p test
template(#footer)
Button(label="Test")
</template>
<script setup>
import { ref, watch, defineEmits } from 'vue'
const emit = defineEmits(['update:show'])
const props = defineProps({
show: {
type: Boolean,
default: false
}
})
const dShow = ref(false)
watch(() => props.show, (newValue) => {
dShow.value = newValue
})
const hide = () => {
emit('update:show', false)
}
</script>
My problem is when I click on the close icon of the dialog, the update:visible function (hide) is being called and the update:show event is getting emitted, but the dialog doesn't disappear. It's still show... so I assume the parent value isn't updated correctly. Any idea what I'm doing wrong here?
I embed the component in the parent as following:
<template lang="pug">
Button(icon="icon pi pi-plus" @click="abcdef = true")
test(:show="abcdef")
</template>
<script setup>
import test from 'mydialog.vue'
const abcdef = ref(false)
</script>
答案1
得分: 0
父组件目前设置了:show属性，但不会对更改作出反应。使用 v-model 来进行双向绑定，以便可以通过子组件通过 update:show 事件更新父组件中的值：
test(v-model:show="abcdef")
英文:
Currently, the parent component sets the :show prop, but it does not react to changes. Use v-model for two-way binding, so that the value in the parent component can be updated from the child through update:show events:
test(v-model:show="abcdef")
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论