使用 Vue 3 从子组件更改父组件的 ref

一尘不染

javascript

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

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

我已经将它导入Navbar到我的父组件中，称为Home. 并且在Home组件中，有一个 div（一个模态），

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

并且仅当模态引用为时，此模态才会显示true。

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

const modal = ref(false);

</scipt>

我的问题是当我们点击我的子组件中的选项时如何使这个模态ref值。true``logout``Navbar

阅读 108

2022-07-26

共1个答案

一尘不染

你可以从孩子那里发出 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>

2022-07-26