Vue3父子組件相互調(diào)用方法舉例詳解
更新時間：2023年08月15日 11:16:40 作者：不甜吶
這篇文章主要給大家介紹了關(guān)于Vue3父子組件相互調(diào)用方法的相關(guān)資料,vue中我們常常用到組件,那么組件中互相調(diào)用也是經(jīng)常遇到的,需要的朋友可以參考下
下面演示均為使用 setup 語法糖的情況！
參考網(wǎng)址：https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose
一、父組件調(diào)用子組件方法
子組件需要使用defineExpose對外暴露方法，父組件才可以調(diào)用！
1.子組件
<template>
<div>我是子組件</div>
</template>
<script lang="ts" setup>
// 第一步：定義子組件的方法
const hello = (str: string) => {
console.log('子組件的hello方法執(zhí)行了--' + str)
}
// 第二部：暴露方法
defineExpose({
hello
})
</script>2.父組件
<template>
<button @click="getChild">觸發(fā)子組件方法</button>
<!-- 一：定義 ref -->
<Child ref="childRef"></Child>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Child from '../../components/child.vue';
// 二：定義與 ref 同名變量
const childRef = ref <any> ()
// 三、函數(shù)
const getChild = () => {
// 調(diào)用子組件的方法或者變量，通過value
childRef.value.hello("hello world！");
}
</script>3.測試結(jié)果
二、子組件調(diào)用父組件方法
1.父組件
<template>
<Child @sayHello="handle"></Child>
</template>
<script lang="ts" setup>
import Child from '../../components/child.vue';
const handle = () => {
console.log('子組件調(diào)用了父組件的方法')
}
</script>2.子組件
<template>
<view>我是子組件</view>
<button @click="say">調(diào)用父組件的方法</button>
</template>
<script lang="ts" setup>
const emit = defineEmits(["sayHello"])
const say = () => {
emit('sayHello')
}
</script>3.測試結(jié)果
總結(jié)
到此這篇關(guān)于Vue3父子組件相互調(diào)用方法的文章就介紹到這了,更多相關(guān)Vue3父子組件相互調(diào)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue里提供了keep-alive組件用來緩存狀態(tài),這篇文章主要給大家介紹了關(guān)于vue中keepAlive組件的作用和使用方法的相關(guān)資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了詳解vue中this.$emit()的返回值是什么，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題
這篇文章主要介紹了vue element Cascader級聯(lián)選擇器解決最后一級顯示空白問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
Vue3如何實現(xiàn)超絲滑打字機(jī)效果組件(可復(fù)用、高定制)
最近遇到一個需求就是使用Web網(wǎng)頁實現(xiàn)打字機(jī)特效,覺著還不錯,這篇文章主要介紹了Vue3如何實現(xiàn)超絲滑打字機(jī)效果組件的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-03-03
今天小編就為大家分享一篇對vue中v-if的常見使用方法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue生產(chǎn)環(huán)境如何自動屏蔽console
這篇文章主要介紹了Vue生產(chǎn)環(huán)境如何自動屏蔽console問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue點擊導(dǎo)航頁面實現(xiàn)自動滾動到特定位置
這篇文章主要介紹了vue點擊導(dǎo)航頁面實現(xiàn)自動滾動到特定位置方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了Vue3封裝實現(xiàn)右鍵菜單組件的相關(guān)知識,文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以了解下2025-02-02
這篇文章主要介紹了Vue 全家桶實現(xiàn)移動端酷狗音樂功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
vue開發(fā)chrome插件，實現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫功能
這篇文章主要介紹了vue開發(fā)chrome插件，實現(xiàn)獲取界面數(shù)據(jù)和保存到數(shù)據(jù)庫功能的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12