Vue3中如何从Navbar子组件修改父组件的modal ref值

针对你遇到的问题，这里提供两种Vue3中父子组件通信的标准实现方式：

方式一：子组件触发自定义事件，父组件监听 #

1. 修改Navbar子组件的点击逻辑 #

在Logout的点击事件里，保留阻止默认行为的同时，触发一个自定义事件（比如logout-trigger）：

<a @click="(event) => {
  event.preventDefault();
  $emit('logout-trigger');
}">
  Logout
</a>

也可以用Vue语法糖简化写法：

<a @click.prevent="$emit('logout-trigger')">
  Logout
</a>

2. 父组件Home监听事件并更新modal #

在使用Navbar组件时，添加事件监听，将modal的值设为true：

<Navbar @logout-trigger="modal = true" />

<div class="modal" v-if="modal">
  <!-- 这里编写模态框内容 -->
</div>

<script setup>
import Navbar from './components/Navbar.vue';
import { ref } from 'vue';

const modal = ref(false);
</script>

方式二：使用v-model双向绑定（更简洁的同步写法） #

1. 配置Navbar子组件支持v-model #

子组件需要接收modelValue属性，并触发update:modelValue事件来同步父组件的值：

<a @click.prevent="$emit('update:modelValue', true)">
  Logout
</a>

<script setup>
// 声明接收父组件传入的modelValue
defineProps(['modelValue']);
// 声明可触发的更新事件
defineEmits(['update:modelValue']);
</script>

2. 父组件用v-model绑定modal #

直接通过v-model关联modal和子组件，点击Logout时会自动更新父组件的modal值：

<Navbar v-model="modal" />

<div class="modal" v-if="modal">
  <!-- 这里编写模态框内容 -->
</div>

<script setup>
import Navbar from './components/Navbar.vue';
import { ref } from 'vue';

const modal = ref(false);
</script>

内容的提问来源于stack exchange，提问作者Mishen Thakshana