快捷導(dǎo)航

Vue3父子組件相互調(diào)用方法舉例詳解

更新時(shí)間：2023年08月15日 11:16:40 作者：不甜吶

這篇文章主要給大家介紹了關(guān)于Vue3父子組件相互調(diào)用方法的相關(guān)資料,vue中我們常常用到組件,那么組件中互相調(diào)用也是經(jīng)常遇到的,需要的朋友可以參考下

一、父組件調(diào)用子組件方法

子組件需要使用defineExpose對(duì)外暴露方法，父組件才可以調(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)用子組件的方法或者變量，通過(guò)value
		childRef.value.hello("hello world！");
	}
</script>

3.測(cè)試結(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.測(cè)試結(jié)果

總結(jié)

到此這篇關(guān)于Vue3父子組件相互調(diào)用方法的文章就介紹到這了,更多相關(guān)Vue3父子組件相互調(diào)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue定義在computed的變量無(wú)法更新問(wèn)題及解決
這篇文章主要介紹了vue定義在computed的變量無(wú)法更新問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue-drag-chart 拖動(dòng)/縮放圖表組件的實(shí)例代碼
這篇文章主要介紹了vue-drag-chart 拖動(dòng)/縮放的圖表組件的實(shí)例代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-04-04
javaScript與vue獲取元素的方法代碼示例
在開(kāi)發(fā)中我們可能會(huì)遇到這樣的問(wèn)題,文本框聚焦、元素點(diǎn)擊等,所以下面這篇文章主要給大家介紹了關(guān)于javaScript與vue獲取元素的相關(guān)資料,需要的朋友可以參考下
2023-10-10
vue+threejs寫物體動(dòng)畫之物體縮放動(dòng)畫效果
最近在vue中安裝Three.js,無(wú)聊順便研究一些關(guān)于3D圖形化庫(kù),下面這篇文章主要給大家介紹了關(guān)于vue+threejs寫物體動(dòng)畫之物體縮放動(dòng)畫效果的相關(guān)資料,需要的朋友可以參考下
2022-10-10
vue實(shí)現(xiàn)el-table點(diǎn)選和鼠標(biāo)框選功能的方法
在Vue中我們經(jīng)常需要處理表格數(shù)據(jù),這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)el-table點(diǎn)選和鼠標(biāo)框選功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-10-10
uniApp?h5項(xiàng)目如何通過(guò)命令行打包并生成指定路徑及文件名稱
用uni-app來(lái)寫安卓端,近日需要將程序打包為H5放到web服務(wù)器上,經(jīng)過(guò)一番折騰,這里給大家分享下,這篇文章主要給大家介紹了關(guān)于uniApp?h5項(xiàng)目如何通過(guò)命令行打包并生成指定路徑及文件名稱的相關(guān)資料,需要的朋友可以參考下
2024-02-02
Vue.js第二天學(xué)習(xí)筆記（vue-router）
這篇文章主要為大家詳細(xì)介紹了Vue.js第二天的學(xué)習(xí)筆記，關(guān)于vue-router的使用方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-12-12
Vue2實(shí)現(xiàn)組件延遲加載的示例代碼
當(dāng)一個(gè)頁(yè)面需要加載較多個(gè)組件時(shí),并且組件自身又比較復(fù)雜,如果一次性加載,可能等待時(shí)間較長(zhǎng),體驗(yàn)不好,這個(gè)時(shí)候就需要延遲加載了,本文為大家介紹了Vue2實(shí)現(xiàn)組件延遲加載的示例代碼,需要的可以參考下
2024-01-01
深入理解Vue3響應(yīng)式原理
響應(yīng)式就是當(dāng)對(duì)象本身(對(duì)象的增刪值)或者對(duì)象屬性(重新賦值)發(fā)生變化時(shí),將會(huì)運(yùn)行一些函數(shù),最常見(jiàn)的就是render函數(shù),下面這篇文章主要給大家介紹了關(guān)于Vue3響應(yīng)式原理的相關(guān)資料,需要的朋友可以參考下
2022-12-12
vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法
今天小編就為大家分享一篇vue 點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09