Vue項(xiàng)目中在父組件中直接調(diào)用子組件的方法
更新時間：2023年11月19日 10:40:30 作者：小墨魚_z
這篇文章主要給大家介紹了Vue項(xiàng)目中如何在父組件中直接調(diào)用子組件的方法,文章通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
方案一：通過ref直接調(diào)用子組件的方法
//父組件中
<template>
<div>
<Button @click="handleClick">點(diǎn)擊調(diào)用子組件方法</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">點(diǎn)擊調(diào)用子組件方法</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項(xiàng)目中在父組件中直接調(diào)用子組件的方法的詳細(xì)內(nèi)容，更多關(guān)于Vue父組件直接調(diào)用子組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue中axios的封裝（報錯、鑒權(quán)、跳轉(zhuǎn)、攔截、提示）
這篇文章主要介紹了Vue中axios的封裝（報錯、鑒權(quán)、跳轉(zhuǎn)、攔截、提示）,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
webpack+vue-cil 中proxyTable配置接口地址代理操作
這篇文章主要介紹了webpack+vue-cil 中proxyTable配置接口地址代理操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法例子
當(dāng)我們在開發(fā)應(yīng)用時經(jīng)常需要對表單進(jìn)行校驗(yàn),以確保用戶輸入的數(shù)據(jù)符合預(yù)期,這篇文章主要給大家介紹了關(guān)于前端Vue中常用rules校驗(yàn)規(guī)則(輪子)如電話身份證郵箱等校驗(yàn)方法的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue devserver及其配置方法,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-12-12
vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法
這篇文章主要介紹了vue 標(biāo)簽屬性數(shù)據(jù)綁定和拼接的實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家介紹了利用Vue3指令實(shí)現(xiàn)水印背景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-03-03
vuex+axios+element-ui實(shí)現(xiàn)頁面請求loading操作示例
這篇文章主要介紹了vuex+axios+element-ui實(shí)現(xiàn)頁面請求loading操作,結(jié)合實(shí)例形式分析了vuex+axios+element-ui實(shí)現(xiàn)頁面請求過程中l(wèi)oading遮罩層相關(guān)操作技巧與使用注意事項(xiàng),需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片拖動排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
v-cloak原理是先通過樣式隱藏內(nèi)容,然后在內(nèi)存中進(jìn)行值的替換,將替換的內(nèi)容再反饋給界面,數(shù)據(jù)渲染完場之后,v-cloak 屬性會被自動去除,本文詳細(xì)介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧2023-09-09
淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑
今天小編就為大家分享一篇淺談vue項(xiàng)目4rs vue-router上線后history模式遇到的坑，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09