Vue3父子組件相互調用方法舉例詳解

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

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

一、父組件調用子組件方法

子組件需要使用defineExpose對外暴露方法，父組件才可以調用！

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> ()
	// 三、函數
	const getChild = () => {
		// 調用子組件的方法或者變量，通過value
		childRef.value.hello("hello world！");
	}
</script>

3.測試結果

二、子組件調用父組件方法

1.父組件

<template>
	<Child @sayHello="handle"></Child>
</template>
<script lang="ts" setup>
	import Child from '../../components/child.vue';
	const handle = () => {
		console.log('子組件調用了父組件的方法')
	}
</script>

2.子組件

<template>
	<view>我是子組件</view>
	<button @click="say">調用父組件的方法</button>
</template>
<script lang="ts" setup>
	const emit = defineEmits(["sayHello"])
	const say = () => {
		emit('sayHello')
	}
</script>

3.測試結果

總結

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

您可能感興趣的文章:

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