Vue父組件調(diào)用子組件函數(shù)實現(xiàn)
更新時間：2021年08月16日 17:29:21 作者：I''m Mr.C
這篇文章主要介紹了Vue父組件調(diào)用子組件函數(shù)實現(xiàn)，全文通過舉例子及代碼的形式進(jìn)行了一個簡單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識
Vue父組件調(diào)用子組件的函數(shù)
父組件通過事件調(diào)用子組件的函數(shù)。例如父組件通過 點擊事件 讓子組件發(fā)請求。
文章中的項目已經(jīng)通過腳手架去創(chuàng)建。
DEMO:
Father.js
<template>
<div>
<div>
<son ref="son"></son>
<input type="button" value="點擊" @click="useSonFun">
</div>
</div>
</template>
<script>
import son from './son'
export default {
components:{
son
},
data(){
return{
}
},
methods: {
useSonFun(){
this.$refs.son.say();//給 子組件 一個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ù)，可以使用在父組件通過點擊發(fā)請求，根據(jù)點擊事件，子組件也發(fā)請求?？梢詤^(qū)別于 父組件點擊發(fā)請求，獲取到數(shù)據(jù)，再把數(shù)據(jù)通過組件傳值的方式傳給子組件。
Tips:
Father.js:
this.$refs.son.say(括號內(nèi)可以將父組件的數(shù)據(jù)傳到子組件);
Son.js:
say(接收父組件傳到子組件的數(shù)據(jù)){
//對數(shù)據(jù)的使用
}
到此這篇關(guān)于java設(shè)計模式之觀察者模式的介紹及使用的文章就介紹到這了,更多相關(guān)觀察者模式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了Vite性能優(yōu)化之分包策略的實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
這篇文章主要為大家整理了Vue3的8種和Vue2的12種組件通信的使用方法，文中的示例代碼講解詳細(xì)，對我們學(xué)習(xí)Vue有一定的幫助，值得收藏2023-04-04
這篇文章主要為大家介紹了Vue的自定義事件內(nèi)容分發(fā)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
這篇文章主要介紹了vue-cli3打包時圖片壓縮處理方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
本文給大家介紹了vue2.x、webpack、vuex、sass+axios、elementUI等快速搭建前端項目框架的詳細(xì)操作方法，需要的跟著學(xué)習(xí)下吧。2017-11-11
本文給大家分享一段詳細(xì)的代碼給大家介紹Vue+Vux項目實踐思路,需要的朋友可以參考下2017-11-11
關(guān)于Vite不能使用require問題的解決方法
在vue2中我們通常會在模板中通過三目運(yùn)算符和require來實現(xiàn)動態(tài)圖片,下面這篇文章主要給大家介紹了關(guān)于Vite不能使用require問題的解決方法,需要的朋友可以參考下2022-10-10
vue pages 多入口項目 + chainWebpack 全局引用縮寫說明
這篇文章主要介紹了vue pages 多入口項目 + chainWebpack 全局引用縮寫說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
在本篇內(nèi)容里小編給大家分享的是關(guān)于vue實現(xiàn)商品列表的添加刪除實例講解，有興趣的朋友們可以參考下。2020-05-05
vue 實現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能
這篇文章主要介紹了vue 實現(xiàn)搜索的結(jié)果頁面支持全選與取消全選功能，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05