vue.js中父組件調(diào)用子組件的內(nèi)部方法示例
更新時間：2017年10月22日 09:55:16 作者：SuperBinlin
這篇文章主要給大家介紹了關(guān)于vue.js中父組件調(diào)用子組件內(nèi)部方法的相關(guān)資料，文中給出來了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家的學(xué)習(xí)或者工作具有一定的參考價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。
前言
今天同事問了一個問題，他在用iview開發(fā)時，需要用到iview一個組件的內(nèi)部方法，而這個內(nèi)部方法并沒有暴露出來，這種情況下如何調(diào)用組件內(nèi)部方法呢，其實(shí)很簡單，舉個栗子🌰
示例代碼
子組件：
<template>
<div>
child
</div>
</template>
<script>
export default {
name: "child",
props: "someprops",
methods: {
parentHandleclick(e) {
console.log(e)
}
}
}
</script>
父組件:
<template>
<div>
<button @click="clickParent">點(diǎn)擊</button>
<child ref="mychild"></child>
</div>
</template>
<script>
import Child from './child';
export default {
name: "parent",
components: {
child: Child
},
methods: {
clickParent() {
this.$refs.mychild.parentHandleclick("嘿嘿嘿");
}
}
}
</script>
當(dāng)然，如果是自己開發(fā)組件時，父組件和子組件有很多方法可以通信~
總結(jié)
以上就是這篇文章的全部內(nèi)容了，本文還有許多不足，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關(guān)文章
Vue 實(shí)現(xiàn)顯示/隱藏層的思路（加全局點(diǎn)擊事件）
這篇文章主要介紹了Vue 實(shí)現(xiàn)顯示/隱藏層的思路（加全局點(diǎn)擊事件）,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
vue單個元素綁定多個事件問題(例如點(diǎn)擊綁定多個事件方法)
這篇文章主要介紹了vue單個元素綁定多個事件問題(例如點(diǎn)擊綁定多個事件方法)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
隨著用vue3 的開發(fā)者越來越多，其必定是又她一定的有帶你，接下來這篇文章小編就為大家介紹vue3 對比 vue2 有什么優(yōu)點(diǎn)？感興趣的小伙伴請跟小編一起閱讀下文吧2021-09-09
Vue如何獲取new Date().getTime()時間戳
在Web開發(fā)中,前端使用Vue.js獲取的是毫秒級時間戳,而PHP后端則是秒級時間戳,處理此類問題時,需要將PHP的時間戳乘以1000轉(zhuǎn)換為毫秒級,以保證數(shù)據(jù)的一致性和正確的邏輯判斷2024-10-10
uni-app中的web-view是一個web瀏覽器組件,可以用來承載網(wǎng)頁的容器,下面這篇文章主要給大家介紹了關(guān)于uniapp使用webView的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了vue使用echarts圖表的詳細(xì)方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-10-10
Vue 使用計時器實(shí)現(xiàn)跑馬燈效果的實(shí)例代碼
這篇文章主要介紹了Vue 使用計時器實(shí)現(xiàn)跑馬燈效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
Vue3實(shí)現(xiàn)跨頁面?zhèn)髦档膸追N常見方法
在Vue 3中,跨頁面?zhèn)髦悼梢酝ㄟ^多種方式實(shí)現(xiàn),具體選擇哪種方法取決于應(yīng)用的具體需求和頁面間的關(guān)系,本文列舉了幾種常見的跨頁面?zhèn)髦捣椒?感興趣的同學(xué)跟著小編來看看吧2024-04-04
vue仿攜程輪播圖效果(滑動輪播,下方高度自適應(yīng))
這篇文章主要介紹了vue仿攜程輪播圖效果（滑動輪播,下方高度自適應(yīng)）,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-02-02
這篇文章主要介紹了Vue如何動態(tài)加載本地圖片的相關(guān)知識，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10