溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
本文主要給大家介紹了關于vue中父組件通過props向子組件傳遞方法的相關內容，分享出來供大家參考學習，下面來一起看看詳細的介紹：
vue 組件中的 this
vue 中 data/computed/methods 中 this的上下文是vue實例,需注意。
例如：
注意：不應該對 data 屬性使用箭頭函數 (例如data: () => { return { a: this.myProp }} ) 。理由是箭頭函數綁定了父級作用域的上下文，所以 this 將不會按照期望指向 Vue 實例，this.myProp 將是 undefined
https://cn.vuejs.org/v2/api/#methods
父組件通過props向子組件傳遞方法
父組件調用子組件，通過綁定callback屬性，將方法傳給子組件：
App.vue <search-bar class="f-fr" placeholder="請輸入名字" 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以函數對象的方式，傳入子組件，子組件調用的時候，this指向子組件
通過 methods
export default {
...
methods: {
callback(responseData) {
this.$store.commit('resetListData', responseData);
}
}
};
此處callback是父組件的一個方法，個人理解，當父組件初始化時，該方法的this上下文就綁定了父組件的實例，因此當子組件調用callback 方法時，this指向父組件。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
