vue.js - 如何使用 prop 控制子组件对父组件的可见性？

Question

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

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

但是，当我尝试使用带有 @click="isVisible = false" 的按钮隐藏表单时，什么也没有发生，并且出现控制台错误，提示 在键“visible”上设置操作失败:目标是只读的。

为什么错误消息引用 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() 保留与原始源的响应式(Reactive)连接，因此修改 isVisible 有效地修改了原始属性，该属性应该是只读的，从而导致警告观察到。

但我认为您实际上是在尝试使子级的 visible 属性与父级的 showForm 属性保持同步，以便子级中的更新自动反射(reflect)在 parent 。 v-model是解决该问题的工具。

在父级中，将 showForm 绑定(bind)到 v-model:visible:

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

在子级中，每当您想要更新父级时，都会发出带有所需值的 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