聊一聊Vue中的回調函數

回調函數 ? 那不是UI框架才用的嗎？

有句話怎麼講來着，書到用時方恨少。日常咱們擼Vue，感受即便用props封裝組件。。也不多本身製做回調這種看起來高大上的東西.......

可是實際開發中封裝組件並非這樣的。許多組件須要子父組件進行通訊

讓咱們舉個栗子：

產品經理有個需求，須要讓你作一個優惠券列表。而後須要把優惠券列表封裝成組件。在下單支付時，調用優惠券列表。而後選擇其中一個，在父組件裏獲取選擇的是哪張優惠券

優惠券列表的UI大體是這樣子（以美團的示例）：

這個需求看起來不難，但實際製做起來。。會發現有個問題：

父組件如何獲取優惠券列表組件選中了哪一張優惠券？

這時候許多初學Vue.js的童鞋可能就凌亂了.....不知道用什麼方式進行數據交互

若是你沒有了解過Vuex，能夠了解一個東西：

回調函數！

回調函數對於許多同窗不陌生。ajax就是很好的例子

回調函數到底是什麼？

回調函數就是一個參數，將這個函數做爲參數傳到另外一個函數裏面，當那個函數執行完以後，再執行傳進去的這個函數。這個過程就叫作回調

emmm.....雲裏霧裏的。通俗一點，就是把方法體當成參數傳遞給另外一個方法體，而後另外一個方法體內部執行傳遞的方法體。並支持傳入參數

話很少說，寫個demo ==

首先咱們先定義一個 子組件 並封裝處理

<template>
  <!--簡單點，定義一個按鈕 並制定一個點擊事件-->
  <button @click="childClick">testCallback</button>
</template>

<script>
  export default {
    name: "ChildComponents",
    props: {
      clickCallBack: {  //定義一個外來方法
        type: Function, //參數類型：函數
        required: true //是否必填：是
      }
    },
    methods: {
      childClick()  {
        this.$props.clickCallBack('這是來自子組件的問候~~'); //調用Props傳來的方法體，並送他一個參數~~
      }
    }
  }
</script>
複製代碼

接着定義一個父組件 調用子組件

<template>
  <!--調用子組件 傳入method裏的自定義函數-->
  <child :click-call-back="ParentTest"></child>
</template>

<script>
  import child from './ChildComponents'
  export default {
    name: "ParentComponents",
    components: {
      child
    },
    data() {
      return {
        say: ''
      }
    },
    methods: {
      ParentTest(val) { //自定義的函數 val是子組件給的參數
        this.say= val; //獻給data一份問候~
        console.log(val,"in params"); //看看參數有沒有值
        console.log(this.say,"in data"); //看看能不能給父組件的data傳進去
      }
    }
  }
</script>
複製代碼

好了，咱們來看看結果：

啊哈，這樣就能夠解決子父組件通訊的問題了。能夠愉快的玩耍了~~

固然，我心血來潮本身實現了一種解決方案。Vue中推薦使用$emit進行回調傳遞.....

同窗們也能夠本身嘗試寫一下jQuery版的回調傳遞