成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue 父組件通過props向子組件傳遞方法的方式

forrest23 / 3026人閱讀

摘要:父組件通過向子組件傳遞方法的方式組件中的中中的上下文是實(shí)例需注意。例如注意,不應(yīng)該對屬性使用箭頭函數(shù)例如。

vue 父組件通過props向子組件傳遞方法的方式 vue 組件中的 this

vue 中 data/computed/methods 中 this的上下文是vue實(shí)例,需注意。例如:

注意,不應(yīng)該對 data 屬性使用箭頭函數(shù) (例如data: () => { return { a: this.myProp }})。理由是箭頭函數(shù)綁定了父級作用域的上下文,所以 this 將不會按照期望指向 Vue 實(shí)例,this.myProp 將是 undefined

https://cn.vuejs.org/v2/api/#...

父組件通過props向子組件傳遞方法

父組件調(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指向子組件

通過 methods
export default {
  ...
  methods: {
    callback(responseData) {
      this.$store.commit("resetListData", responseData);
    }
  }
};

此處callback是父組件的一個方法,個人理解,當(dāng)父組件初始化時,該方法的this上下文就綁定了父組件的實(shí)例,因此當(dāng)子組件調(diào)用callback 方法時,this指向父組件。

文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/84648.html

相關(guān)文章

  • Vue 單文件中數(shù)據(jù)傳遞

    摘要:兩個同級組件之間傳遞數(shù)據(jù),通過傳遞數(shù)據(jù)。準(zhǔn)備工作,我新建了個文件,分別是實(shí)例根組件,包含和組件的父組件,的同級組件父組件向子組件傳遞數(shù)據(jù),通過傳遞數(shù)據(jù)。 ??Vue 的單文件組件在使用 Vue 時非常常用,所以我們也會經(jīng)常遇到組件之間需要傳遞數(shù)據(jù)的時候,大致分為三種情況: 父組件向子組件傳遞數(shù)據(jù),通過 props 傳遞數(shù)據(jù)。 子組件向父組件傳遞數(shù)據(jù),通過 events 傳遞數(shù)據(jù)。 兩...

    darry 評論0 收藏0
  • 聊聊Vue.js組件間通信幾種姿勢

    摘要:子組件向父組件通信方法一使用事件父組件向子組件傳遞事件方法,子組件通過觸發(fā)事件,回調(diào)給父組件。非父子組件兄弟組件之間的數(shù)據(jù)傳遞非父子組件通信,官方推薦使用一個實(shí)例作為中央事件總線。 寫在前面 因?yàn)閷ue.js很感興趣,而且平時工作的技術(shù)棧也是Vue.js,這幾個月花了些時間研究學(xué)習(xí)了一下Vue.js源碼,并做了總結(jié)與輸出。 文章的原地址:https://github.com/answ...

    Profeel 評論0 收藏0
  • vue組件通信全面總結(jié)

    摘要:當(dāng)一個組件沒有聲明任何時,這里會包含所有父作用域的綁定和除外,并且可以通過傳入內(nèi)部組件在創(chuàng)建高級別的組件時非常有用。 寫在前面 組件間的通信是是實(shí)際開發(fā)中非常常用的一環(huán),如何使用對項(xiàng)目整體設(shè)計(jì)、開發(fā)、規(guī)范都有很實(shí)際的的作用,我在項(xiàng)目開發(fā)中對此深有體會,總結(jié)下vue組件間通信的幾種方式,討論下各自的使用場景 文章對相關(guān)場景預(yù)覽 父->子組件間的數(shù)據(jù)傳遞 子->父組件間的數(shù)據(jù)傳遞 兄弟...

    余學(xué)文 評論0 收藏0
  • 詳解vue組件三大核心概念

    摘要:前言本文主要介紹屬性事件和插槽這三個基礎(chǔ)概念使用方法及其容易被忽略的一些重要細(xì)節(jié)。至于如何改變,我們接下去詳細(xì)介紹單向數(shù)據(jù)流這個概念出現(xiàn)在組件通信。比如上例中在子組件中修改父組件傳遞過來的數(shù)組從而改變父組件的狀態(tài)。的一個核心思想是數(shù)據(jù)驅(qū)動。 前言 本文主要介紹屬性、事件和插槽這三個vue基礎(chǔ)概念、使用方法及其容易被忽略的一些重要細(xì)節(jié)。如果你閱讀別人寫的組件,也可以從這三個部分展開,它們...

    rickchen 評論0 收藏0
  • vue組件間通信六種方式(完整版)

    摘要:本文總結(jié)了組件間通信的幾種方式,如和,以通俗易懂的實(shí)例講述這其中的差別及使用場景,希望對小伙伴有些許幫助。狀態(tài)改變提交操作方法。 前言 組件是 vue.js最強(qiáng)大的功能之一,而組件實(shí)例的作用域是相互獨(dú)立的,這就意味著不同組件之間的數(shù)據(jù)無法相互引用。一般來說,組件可以有以下幾種關(guān)系:showImg(https://segmentfault.com/img/remote/146000001...

    frontoldman 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<