Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)
更新時(shí)間：2021年08月16日 17:29:21 作者：I''m Mr.C
這篇文章主要介紹了Vue父組件調(diào)用子組件函數(shù)實(shí)現(xiàn)，全文通過舉例子及代碼的形式進(jìn)行了一個(gè)簡單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識(shí)
Vue父組件調(diào)用子組件的函數(shù)
父組件通過事件調(diào)用子組件的函數(shù)。例如父組件通過 點(diǎn)擊事件 讓子組件發(fā)請(qǐng)求。
文章中的項(xiàng)目已經(jīng)通過腳手架去創(chuàng)建。
DEMO:
Father.js
<template>
<div>
<div>
<son ref="son"></son>
<input type="button" value="點(diǎn)擊" @click="useSonFun">
</div>
</div>
</template>
<script>
import son from './son'
export default {
components:{
son
},
data(){
return{
}
},
methods: {
useSonFun(){
this.$refs.son.say();//給 子組件 一個(gè)ref,通過ref去調(diào)用子組件中的函數(shù)
}
},
}
</script>
Son.js
<template>
<div>
<h1>SON</h1>
</div>
</template>
<script>
export default {
data(){
return {
}
},
methods:{
say(){//需要父組件去調(diào)用的子組件函數(shù)
console.log("SON COMPONENT");
}
},
}
</script>
效果圖
父組件調(diào)用子組件函數(shù)，可以使用在父組件通過點(diǎn)擊發(fā)請(qǐng)求，根據(jù)點(diǎn)擊事件，子組件也發(fā)請(qǐng)求?？梢詤^(qū)別于 父組件點(diǎn)擊發(fā)請(qǐng)求，獲取到數(shù)據(jù)，再把數(shù)據(jù)通過組件傳值的方式傳給子組件。
Tips:
Father.js:
this.$refs.son.say(括號(hào)內(nèi)可以將父組件的數(shù)據(jù)傳到子組件);
Son.js:
say(接收父組件傳到子組件的數(shù)據(jù)){
//對(duì)數(shù)據(jù)的使用
}
到此這篇關(guān)于java設(shè)計(jì)模式之觀察者模式的介紹及使用的文章就介紹到這了,更多相關(guān)觀察者模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue和webpack項(xiàng)目構(gòu)建過程常用的npm命令詳解
本文通過實(shí)例代碼給大家介紹了vue和webpack項(xiàng)目構(gòu)建過程常用的npm命令,需要的朋友可以參考下2018-06-06
Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題
這篇文章主要介紹了Vue項(xiàng)目保持element組件同行,設(shè)置組件不自動(dòng)換行問題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue使用extend動(dòng)態(tài)創(chuàng)建組件的實(shí)現(xiàn)
本文主要介紹了Vue使用extend動(dòng)態(tài)創(chuàng)建組件的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
在Vue中, v-slot 指令用于定義插槽的模板內(nèi)容,v-slot 指令可以用于標(biāo)簽或組件標(biāo)簽上,以便在子組件中使用插槽,這篇文章主要介紹了vue v-slot指令,需要的朋友可以參考下2023-08-08
Vee-validate 父組件獲取子組件表單校驗(yàn)結(jié)果的實(shí)例代碼
vee-validate 是為 Vue.js 量身打造的表單校驗(yàn)框架，允許您校驗(yàn)輸入的內(nèi)容并顯示對(duì)應(yīng)的錯(cuò)誤提示信息。這篇文章主要介紹了Vee-validate 父組件獲取子組件表單校驗(yàn)結(jié)果 ,需要的朋友可以參考下2019-05-05
Vue實(shí)現(xiàn)回到頂部和底部動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)回到頂部和底部動(dòng)畫效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了Vue3組件的開發(fā)，上一篇文章我們價(jià)紹了Vue3（三）網(wǎng)站首頁布局開發(fā)，今天繼續(xù)上篇內(nèi)容展開組件的開發(fā),需要的朋友可以參考一下2021-11-11
Vue之Vue.set動(dòng)態(tài)新增對(duì)象屬性方法
下面小編就為大家分享一篇Vue之Vue.set動(dòng)態(tài)新增對(duì)象屬性方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要為大家介紹了Vue開發(fā)常用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了詳解element-ui中form驗(yàn)證雜記，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03