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