vue 父組件通過(guò)props向子組件傳遞方法的方式

forrest23 發(fā)布于2019-08-20 18:32 / 3078人閱讀

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

vue 父組件通過(guò)props向子組件傳遞方法的方式 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/#...

父組件通過(guò)props向子組件傳遞方法

父組件調(diào)用子組件，通過(guò)綁定callback屬性，將方法傳給子組件：

App.vue

子組件通過(guò)props獲取父組件傳過(guò)來(lái)的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"]
}

通過(guò) data

export default {
  ...
  data:function() {
    return {
      callback:function(responseData) {
        this.$store.commit("resetListData", responseData);
      }
    }
  },
  ...
};

此處callback以函數(shù)對(duì)象的方式，傳入子組件，子組件調(diào)用的時(shí)候，this指向子組件

通過(guò) 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指向父組件。

云服務(wù)器 GPU云服務(wù)器 vue組件 vue組件開(kāi)發(fā) vue父子組件通訊 vue輪播組件

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84648.html

相關(guān)文章

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

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

darry 2019-08-20 15:16 評(píng)論0 收藏0
聊聊Vue.js組件間通信的幾種姿勢(shì)

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

Profeel 2019-08-21 17:11 評(píng)論0 收藏0
vue組件通信全面總結(jié)

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

余學(xué)文 2019-08-23 12:16 評(píng)論0 收藏0
詳解vue組件三大核心概念

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

rickchen 2019-08-23 17:51 評(píng)論0 收藏0
vue組件間通信六種方式（完整版）

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

frontoldman 2019-08-26 13:48 評(píng)論0 收藏0