如何在vue中的父组件和子组件之间绑定值?

ljo96ir5  于 2023-08-07  发布在  Vue.js
关注(0)|答案(3)|浏览(123)

我有一个组件A,在这个组件A中有一个对话框。我想使用visible属性来控制对话框的可见性。
组分A:

<template>
    <dialog :visible="visibleProp"/>
</templage>
<script setup>
const visibleProp= ref(true)
<script>

字符串
对话框:

<template>
    <dialog  v-model="visible"></dialog>
</templage>
<script setup>
const prop = defineProps(['visible'])
<script>


注意:对话框是另一个组件。
我得到这个错误
v-model cannot be used on a prop, because local prop bindings are not writable.Use a v-bind binding combined with a v-on listener that emits update:x event instead.
这可能是由props should be considered readonly within the component.引起的
我如何改变我的代码来实现我的目标?多谢了!

nxagd54h

nxagd54h1#

对话

<template>
    <dialog  v-model="visible"></dialog>
</templage>
<script setup>
import { computed } from 'vue'
const prop = defineProps(['visible'])
const emits = defineEmits(['update:visible'])
const visible = computed({
  get() {
    return prop.visible
  },
  set(value) {
    emits('update:visible', value)
  }
})
</script>

字符串

7xzttuei

7xzttuei2#

Vue3 SFC Playground
正确使用v-model-使用专用事件更新它。你不能直接改变组件属性-它们是只读的。在您的例子中,我建议将您的名称命名为v-modelvisibility以使其更明确。请参阅Vue的文档:
https://vuejs.org/guide/components/v-model.html
如果你使用一个HTML本地对话框,你应该注意你的prop和call方法在对话框的ref上。
我强烈建议使用原生HTML对话框,因为它有更好的键盘导航和可访问性。
App.vue:

<script setup>

import MyDialog from './MyDialog.vue';
import {ref} from 'vue';
const visible = ref(false);

</script>
<template>
  <button @click="visible=true">Show dialog</button>
  <my-dialog v-model:visible="visible">
    <template #title>My Dialog</template>
    Testing v-model for the dialog's visibility
  </my-dialog>
</template>

字符串
MyDialog.vue

<script setup>

const props = defineProps({visible:Boolean});

import {ref, watch, onMounted} from 'vue';
const $dialog = ref();

onMounted(() => {
    watch(() => props.visible, val => val ? $dialog.value.showModal() : $dialog.value.close(), {immediate:true});
});

</script>
<template>
<dialog @close="$emit('update:visible', false)" ref="$dialog">
    <h2><slot name="title"></slot></h2>
    <p><slot></slot></p>
    <button @click="$dialog.close()">Close</button>
</dialog>
</template>

2izufjch

2izufjch3#

你需要从对话框组件中获取可见的更新,而不是重新发出它,让父组件来处理, prop 不应该直接变化。
组分A:

<template>
  <dialog v-model:visible="visibleProp" />
</template>
<script setup>
const visibleProp = ref(true);
</script>

字符串
对话框:

<template>
  <dialog  :modelValue="visible" @update:modelValue="$emit('update:visible')"></dialog>
</templage>
<script setup>
const prop = defineProps(['visible'])
<script>


有关自定义v模型的更多详细信息,请参见https://vuejs.org/guide/components/v-model.html

相关问题