我有一个组件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.
引起的
我如何改变我的代码来实现我的目标?多谢了!
3条答案
按热度按时间nxagd54h1#
对话
字符串
7xzttuei2#
Vue3 SFC Playground
正确使用
v-model
-使用专用事件更新它。你不能直接改变组件属性-它们是只读的。在您的例子中,我建议将您的名称命名为v-model
visibility
以使其更明确。请参阅Vue的文档:https://vuejs.org/guide/components/v-model.html
如果你使用一个HTML本地对话框,你应该注意你的prop和call方法在对话框的ref上。
我强烈建议使用原生HTML对话框,因为它有更好的键盘导航和可访问性。
App.vue:
字符串
MyDialog.vue
型
2izufjch3#
你需要从对话框组件中获取可见的更新,而不是重新发出它,让父组件来处理, prop 不应该直接变化。
组分A:
字符串
对话框:
型
有关自定义v模型的更多详细信息,请参见https://vuejs.org/guide/components/v-model.html