Vue項目中在父組件中直接調用子組件的方法
更新時間：2023年11月19日 10:40:30 作者：小墨魚_z
這篇文章主要給大家介紹了Vue項目中如何在父組件中直接調用子組件的方法,文章通過代碼示例介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
方案一：通過ref直接調用子組件的方法
//父組件中
<template>
<div>
<Button @click="handleClick">點擊調用子組件方法</Button>
<Child ref="child"/>
</div>
</template>
<script>
import Child from './child';
export default {
methods: {
handleClick() {
this.$refs.child.sing();
},
},
}
</script>
//子組件中
<template>
<div>我是子組件</div>
</template>
<script>
export default {
methods: {
sing() {
console.log('我是子組件的方法');
},
},
};
</script>方案二：通過組件的$emit、$on方法
//父組件中
<template>
<div>
<Button @click="handleClick">點擊調用子組件方法</Button>
<Child ref="child"/>
</div>
</template>
<script>
import Child from './child';
export default {
methods: {
handleClick() {
this.$refs.child.$emit("childmethod") //子組件$on中的名字
},
},
}
</script>
//子組件中
<template>
<div>我是子組件</div>
</template>
<script>
export default {
mounted() {
this.$nextTick(function() {
this.$on('childmethods', function() {
console.log('我是子組件方法');
});
});
},
};
</script>以上就是Vue項目中在父組件中直接調用子組件的方法的詳細內容，更多關于Vue父組件直接調用子組件的資料請關注腳本之家其它相關文章！
相關文章
前端vue-cli項目中使用img圖片和background背景圖的幾種方法
這篇文章主要介紹了前端vue-cli項目中使用img圖片和background背景圖的幾種方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
本篇文章主要介紹了vue.js實例todoList項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
如何在Vue3中創(chuàng)建動態(tài)主題切換功能
在Vue3中實現(xiàn)動態(tài)主題切換功能,通過明亮和暗色主題的選擇,提供個性化使用體驗,使用setup語法糖優(yōu)化代碼,通過創(chuàng)建組件和響應式變量來進行主題切換,并動態(tài)加載CSS文件2024-09-09
vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色
這篇文章主要介紹了vue循環(huán)el-button實現(xiàn)點擊哪個按鈕,那個按鈕就變色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Vue組件封裝之dialog對話框組件,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
本篇文章主要介紹了vuex2.0 之 modules,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了Vue中使用mixins混入方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)多標簽選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了nginx部署多個vue項目的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-09-09
Vue表單校驗validate和validateField的使用及區(qū)別詳解
validateField?和?validate?都可以用于表單驗證,但是它們的作用有所不同,下面這篇文章主要給大家介紹了關于Vue表單校驗validate和validateField的使用及區(qū)別的相關資料,需要的朋友可以參考下2024-04-04