如何使用道具控制父组件的子组件的可见性？

Question

我正在尝试使用 prop 从父组件控制子组件的可见性。

我的子组件有一个 visible 道具。为了避免改变 visible 属性，我将它分配给本地 isVisible ref，并且我使用它来有条件地显示和隐藏表单。

但是，当我尝试使用带 @click="isVisible = false" 的按钮隐藏表单时，没有任何反应，并且我收到控制台错误消息 Set operation on key "visible" failed: target is readonly。

同样令人困惑的是，为什么错误消息指的是 visible 道具，因为我使用的是本地 isVisible 变量。

这是 ChildForm.vue（子组件）：

<template>
  <q-form v-if="isVisible">
    <q-input v-model="modelValue" />
    <q-btn label="Hide The Form" @click="isVisible = false" />
  </q-form>
</template>

<script setup lang="ts">
import { ref, toRef } from 'vue';
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
});
const isVisible = toRef(props, 'visible');
const modelValue = ref('');
</script>

这是ParentPage.vue（父组件）：

<template>
  <child-form :visible="showForm" />
  <q-btn label="Show the Form" @click="showForm = true" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import ChildForm from 'src/components/ChildForm.vue';
const showForm = ref(false);
</script>

Answer 1

toRef() 保留了与原始源的反应性连接，因此修改 isVisible 有效地修改了原始 prop，它应该是只读的，导致您观察到的警告。

但我认为您实际上是在尝试使 child 的 visible 属性与 parent 的 showForm 属性保持同步，这样更新在 child 中自动反映在 parent 中。 v-model 是解决该问题的工具。

在parent中，绑定showForm到v-model:visible:

<child-form v-model:visible="showForm">

在 child 中，只要您想更新 parent:

，就会发出具有所需值的 update:visible 事件

<template>
  <q-form v-if="visible">
    <q-input v-model="modelValue" />                  
    <q-btn label="Hide The Form" @click="$emit('update:visible', false)" />
  </q-form>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    required: true,
    default: false,
  },
})
const modelValue = ref('')
</script>

demo

如何使用道具控制父组件的子组件的可见性？

How to control the visibility of a child component from the parent using a prop?

vue.js

quasar-framework

vuejs3

vue-composition-api

vue-script-setup