摘要:父組件通過向子組件傳遞方法的方式組件中的中中的上下文是實例需注意。例如注意,不應(yīng)該對屬性使用箭頭函數(shù)例如。
vue 父組件通過props向子組件傳遞方法的方式 vue 組件中的 this
vue 中 data/computed/methods 中 this的上下文是vue實例,需注意。例如:
父組件通過props向子組件傳遞方法注意,不應(yīng)該對 data 屬性使用箭頭函數(shù) (例如data: () => { return { a: this.myProp }})。理由是箭頭函數(shù)綁定了父級作用域的上下文,所以 this 將不會按照期望指向 Vue 實例,this.myProp 將是 undefined
https://cn.vuejs.org/v2/api/#...
父組件調(diào)用子組件,通過綁定callback屬性,將方法傳給子組件:
App.vue
子組件通過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ù)對象的方式,傳入子組件,子組件調(diào)用的時候,this指向子組件
通過 methodsexport default { ... methods: { callback(responseData) { this.$store.commit("resetListData", responseData); } } };
此處callback是父組件的一個方法,個人理解,當父組件初始化時,該方法的this上下文就綁定了父組件的實例,因此當子組件調(diào)用callback 方法時,this指向父組件。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/84648.html
摘要:兩個同級組件之間傳遞數(shù)據(jù),通過傳遞數(shù)據(jù)。準備工作,我新建了個文件,分別是實例根組件,包含和組件的父組件,的同級組件父組件向子組件傳遞數(shù)據(jù),通過傳遞數(shù)據(jù)。 ??Vue 的單文件組件在使用 Vue 時非常常用,所以我們也會經(jīng)常遇到組件之間需要傳遞數(shù)據(jù)的時候,大致分為三種情況: 父組件向子組件傳遞數(shù)據(jù),通過 props 傳遞數(shù)據(jù)。 子組件向父組件傳遞數(shù)據(jù),通過 events 傳遞數(shù)據(jù)。 兩...
摘要:子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法,子組件通過觸發(fā)事件,回調(diào)給父組件。非父子組件兄弟組件之間的數(shù)據(jù)傳遞非父子組件通信,官方推薦使用一個實例作為中央事件總線。 寫在前面 因為對Vue.js很感興趣,而且平時工作的技術(shù)棧也是Vue.js,這幾個月花了些時間研究學習了一下Vue.js源碼,并做了總結(jié)與輸出。 文章的原地址:https://github.com/answ...
摘要:當一個組件沒有聲明任何時,這里會包含所有父作用域的綁定和除外,并且可以通過傳入內(nèi)部組件在創(chuàng)建高級別的組件時非常有用。 寫在前面 組件間的通信是是實際開發(fā)中非常常用的一環(huán),如何使用對項目整體設(shè)計、開發(fā)、規(guī)范都有很實際的的作用,我在項目開發(fā)中對此深有體會,總結(jié)下vue組件間通信的幾種方式,討論下各自的使用場景 文章對相關(guān)場景預(yù)覽 父->子組件間的數(shù)據(jù)傳遞 子->父組件間的數(shù)據(jù)傳遞 兄弟...
摘要:前言本文主要介紹屬性事件和插槽這三個基礎(chǔ)概念使用方法及其容易被忽略的一些重要細節(jié)。至于如何改變,我們接下去詳細介紹單向數(shù)據(jù)流這個概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過來的數(shù)組從而改變父組件的狀態(tài)。的一個核心思想是數(shù)據(jù)驅(qū)動。 前言 本文主要介紹屬性、事件和插槽這三個vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細節(jié)。如果你閱讀別人寫的組件,也可以從這三個部分展開,它們...
摘要:本文總結(jié)了組件間通信的幾種方式,如和,以通俗易懂的實例講述這其中的差別及使用場景,希望對小伙伴有些許幫助。狀態(tài)改變提交操作方法。 前言 組件是 vue.js最強大的功能之一,而組件實例的作用域是相互獨立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說,組件可以有以下幾種關(guān)系:showImg(https://segmentfault.com/img/remote/146000001...
閱讀 2060·2021-11-23 09:51
閱讀 3353·2021-09-28 09:36
閱讀 1120·2021-09-08 09:35
閱讀 1758·2021-07-23 10:23
閱讀 3258·2019-08-30 15:54
閱讀 2998·2019-08-29 17:05
閱讀 438·2019-08-29 13:23
閱讀 1294·2019-08-28 17:51