前言:
最近在寫一個項目的過程中,遇到了父組件需要調(diào)用子組件中方法的情況,最終找到了實現(xiàn)方法,總結(jié)如下:文章來源地址http://www.zghlxwxcb.cn/news/detail-827915.html
1.在子組件中定義方法并暴露出去
//在popupType組件中
<template>
<div v-show="show">
我是藍宇逸辰
</div>
<button @click="crossPopup">X</button>
</template>
<script setup>
import { ref,defineExpose } from 'vue';
let show = ref(false);
const crossPopup = () => {
show.value = !show.value;
}
defineExpose({
crossPopup,
});
</script>
2.在父組件中獲取子組件并調(diào)用子組件中的方法
<template>
<div>
<button @click="changeShow">顯示</button>
//2.1
<PopupType ref="childComp"></PopupType>
</div>
</template>
<script setup>
import PopupType from '../components/popupType.vue';
import { ref } from 'vue';
//2.2
const childComp = ref(null);
//2.3
const changeShow = () => {
childComp.value.crossPopup()
}
</script>
文章來源:http://www.zghlxwxcb.cn/news/detail-827915.html
到了這里,關(guān)于在Vue3中,父組件調(diào)用子組件中的方法的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!