快捷導(dǎo)航

Vue子組件調(diào)用父組件方法案例詳解

更新時(shí)間：2021年09月14日 09:03:25 作者：貓老板的豆

這篇文章主要介紹了Vue子組件調(diào)用父組件方法案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

一、直接在子組件中通過this.$parent.event來調(diào)用父組件的方法

<!-- 父組件 -->
<template>
	<div>
		<child></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components: {
		child
	},
	methods: {
		fatherMethod () {
			console.log('測試');
		}
	}
};
</script>

<!-- 子組件 -->
<template>
  <div>
    <button @click="childMethod()">點(diǎn)擊</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>

二、在子組件里用$emit向父組件觸發(fā)一個(gè)事件，父組件監(jiān)聽這個(gè)事件

<!-- 父組件 -->
<template>
	<div>
		<child @fatherMethod="fatherMethod"></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components: {
		child
	},
	methods: {
		fatherMethod () {
			console.log('測試');
		}
	}
};
</script>

<!-- 子組件 -->
<template>
	<div>
		<button @click="childMethod()">點(diǎn)擊</button>
	</div>
</template>
<script>
export default {
	methods: {
		childMethod () {
			this.$emit('fatherMethod');
		}
	}
};
</script>

三、父組件把方法傳入子組件中，在子組件里直接調(diào)用這個(gè)方法

<!-- 父組件 -->
<template>
	<div>
		<child :fatherMethod="fatherMethod"></child>
	</div>
</template>
<script>
import child from '~/components/dam/child';
export default {
	components: {
		child
	},
	methods: {
		fatherMethod () {
			console.log('測試');
		}
	}
};
</script>

<!-- 子組件 -->
<template>
	<div>
		<button @click="childMethod()">點(diǎn)擊</button>
	</div>
</template>
<script>
export default {
	props: {
		fatherMethod: {
			type: Function,
			default: null
		}
	},
	methods: {
		childMethod () {
			if (this.fatherMethod) {
				this.fatherMethod();
			}
		}
	}
};
</script>

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

您可能感興趣的文章:

相關(guān)文章

vue中靜態(tài)文件引用的注意事項(xiàng)及說明
這篇文章主要介紹了vue中靜態(tài)文件引用的注意事項(xiàng)及說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04
深入探討如何在Vue中使用EventBus實(shí)現(xiàn)組件間的高效通信
在現(xiàn)代前端開發(fā)中,Vue.js?作為一種流行的漸進(jìn)式框架,廣泛應(yīng)用于各類?Web?項(xiàng)目的構(gòu)建中,本文將深入探討如何在?Vue?中使用?EventBus,實(shí)現(xiàn)組件間的高效通信,需要的可以了解下
2024-11-11
關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行
今天小編就為大家分享一篇關(guān)于vue.js中實(shí)現(xiàn)方法內(nèi)某些代碼延時(shí)執(zhí)行，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí)
本篇文章主要介紹了Vue2.0使用過程常見的一些問題總結(jié)學(xué)習(xí)，詳細(xì)的介紹了使用中會(huì)遇到的各種錯(cuò)誤，有興趣的可以了解一下。
2017-04-04
vue-cli3使用postcss-plugin-px2rem方式
這篇文章主要介紹了vue-cli3使用postcss-plugin-px2rem方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-07-07
IE9 elementUI文件上傳的問題解決
這篇文章主要介紹了IE9 elementUI文件上傳的問題解決，有需要了解IE9 elementUI文件上傳的朋友可參考。希望此文章對(duì)各位有所幫助
2018-10-10
Element-ui el-tree新增和刪除節(jié)點(diǎn)后如何刷新tree的實(shí)例
這篇文章主要介紹了Element-ui el-tree新增和刪除節(jié)點(diǎn)后如何刷新tree的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決
本文主要介紹了vue項(xiàng)目運(yùn)行時(shí)出現(xiàn)It works的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-07-07
vue監(jiān)聽瀏覽器網(wǎng)頁關(guān)閉和網(wǎng)頁刷新事件代碼示例
在前端開發(fā)中我們通常會(huì)遇到這樣的需求,用戶離開、刷新頁面前,修改數(shù)據(jù)未進(jìn)行保存操作,需要提示框提醒用戶,這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽瀏覽器網(wǎng)頁關(guān)閉和網(wǎng)頁刷新事件的相關(guān)資料,需要的朋友可以參考下
2023-08-08
Vite打包項(xiàng)目后圖片丟失的簡單解決方法
vue項(xiàng)目完成打包上線的時(shí)候很多人都會(huì)碰到靜態(tài)資源找不到的情況,下面這篇文章主要給大家介紹了關(guān)于Vite打包項(xiàng)目后圖片丟失的簡單解決方法,需要的朋友可以參考下
2023-05-05