使用 Vue 3 更改子组件父组件的引用

Question

我有一个名为 的子组件Navbar。注销是导航栏中的一个选项。

<a @click="(event) => {event.preventDefault();}">
  Logout 
</a>

我已将其导入Navbar到名为 的父组件中Home。并且在Home组件中，有一个div（模态），

<div class="modal" v-if="modal">

仅当模态 ref 为 时，此模态才会显示true。

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

const modal = ref(false);

</scipt>

我的问题是，当我们单击子组件中的选项时，如何设置此模态ref值。truelogoutNavbar

Answer 1

在父级中

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

    const modal = ref(false);

    const setModalTrue= () => this.modal.value = true;        
</script>
<template>
    ....
    <navbar @nav-event="setModalTrue">
    ....
    </navbar>
    ....
</template>

在导航栏中

<script setup>
    const emit = defineEmits(["nav-event"]);
    const sendNavEvent = () => emit("nav-event");
</script>
<template>
    ....
    <a @click.prevent="sendNavEvent">
    ....
    </a>
    ....
</template>

注意@click.prevent=....- 这preventDefault对你有用

Answer 2

你可以从孩子那里发出 Navbar.vue

<a @click="buttonClick">
  Logout 
</a>

和

<script setup>
const emit = defineEmits(['showModal'])

function buttonClick() {
  emit('showModal', true)
}
</script>

然后你会在父级中使用 Navbar.vue 像

<Navbar @showModal="setModalVisibility" />
.
.
.

<script setup>
function setModalVisibilty() {
  modal.value = true;
}
</script>