vue父組件通過props如何向子組件傳遞方法詳解
前言
本文主要給大家介紹了關(guān)于vue中父組件通過props向子組件傳遞方法的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面來一起看看詳細(xì)的介紹：
vue 組件中的 this
vue 中 data/computed/methods 中 this的上下文是vue實(shí)例,需注意。
例如：
注意：不應(yīng)該對(duì) data 屬性使用箭頭函數(shù) (例如data: () => { return { a: this.myProp }} ) 。理由是箭頭函數(shù)綁定了父級(jí)作用域的上下文，所以 this 將不會(huì)按照期望指向 Vue 實(shí)例，this.myProp 將是 undefined
https://cn.vuejs.org/v2/api/#methods
父組件通過props向子組件傳遞方法
父組件調(diào)用子組件，通過綁定callback屬性，將方法傳給子組件：
App.vue <search-bar class="f-fr" placeholder="請(qǐng)輸入名字" mutationName='resetListData' :callback="callback"/>
子組件通過props獲取父組件傳過來的callback方法：
SearchBar.vue
export default {
name: 'SearchBar',
data() {
return {
input: ''
}
},
methods: {
setName: function () {
var input = this.input;
if (input.trim() == '') {
alert("empty");
}
else {
Api.searchTest(this.input,this.success );
}
},
success(responseData) {
this.callback(responseData);
},
},
props: ['placeholder', 'apiName', 'moduleName', 'mutationName','callback']
}
通過 data
export default {
...
data:function() {
return {
callback:function(responseData) {
this.$store.commit('resetListData', responseData);
}
}
},
...
};
此處callback以函數(shù)對(duì)象的方式，傳入子組件，子組件調(diào)用的時(shí)候，this指向子組件
通過 methods
export default {
...
methods: {
callback(responseData) {
this.$store.commit('resetListData', responseData);
}
}
};
此處callback是父組件的一個(gè)方法，個(gè)人理解，當(dāng)父組件初始化時(shí)，該方法的this上下文就綁定了父組件的實(shí)例，因此當(dāng)子組件調(diào)用callback 方法時(shí)，this指向父組件。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
vue中數(shù)據(jù)字典dicts的簡(jiǎn)單說明和用法介紹
這篇文章主要給大家介紹了關(guān)于vue中數(shù)據(jù)字典dicts的簡(jiǎn)單說明和用法的相關(guān)資料,如果您想在Vue中使用字典查詢,您可以使用Vue的計(jì)算屬性和方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
小編這次要給大家分享的是如何實(shí)現(xiàn)vue2.x數(shù)組劫持，文章內(nèi)容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲2023-01-01
vue-echarts高度縮小時(shí)autoresize失效的原因和解決辦法
Vue-Echarts是一個(gè)基于ECharts封裝的輕量級(jí)、易用的圖表組件庫(kù),它允許你在Vue.js應(yīng)用中方便地集成ECharts,這是一個(gè)強(qiáng)大而直觀的數(shù)據(jù)可視化庫(kù),本文給大家介紹了vue-echarts高度縮小時(shí)autoresize失效的原因和解決辦法,需要的朋友可以參考下2024-12-12
vue2+elementUI實(shí)現(xiàn)下拉樹形多選框效果實(shí)例
這篇文章主要給大家介紹了關(guān)于vue2+elementUI實(shí)現(xiàn)下拉樹形多選框效果的相關(guān)資料,這是最近的工作中遇到的一個(gè)需求,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue如何預(yù)覽后端傳來的二進(jìn)制圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-06-06
最近需要用到vue，在el-form-item屬性prop上遇到報(bào)錯(cuò)或者沒綁定到數(shù)據(jù)，本文主要介紹了element中el-form-item屬性prop踩坑，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vant中如何修改用戶的頭像，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue 之 .sync 修飾符的相關(guān)知識(shí)，非常不錯(cuò)，具有參考借鑒價(jià)值 ,需要的朋友可以參考下2018-04-04
vite+vue3中require?is?not?defined問題及解決
這篇文章主要介紹了vite+vue3中require?is?not?defined問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue中的 nextTick 涉及到Vue中DOM的異步更新，感覺很有意思，特意了解了一下。其中關(guān)于 nextTick 的源碼涉及到不少知識(shí)，很多不太理解，暫且根據(jù)自己的一些感悟介紹下 nextTick2019-05-05