聊一聊Vue中的回撥函式

王聖鬆發表於2018-06-10
Vue函式

回撥函式 ? 那不是UI框架才用的嗎？

有句話怎麼講來著，書到用時方恨少。平常我們擼Vue，感覺即使用props封裝元件。。也很少自己製作回撥這種看起來高大上的東西.......

但是實際開發中封裝元件並不是這樣的。許多元件需要子父元件進行通訊

讓我們舉個栗子：

產品經理有個需求，需要讓你做一個優惠券列表。然後需要把優惠券列表封裝成元件。在下單支付時，呼叫優惠券列表。然後選擇其中一個，在父元件裡獲取選擇的是哪張優惠券

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


聊一聊Vue中的回撥函式


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

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

這時候許多初學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中的回撥函式



啊哈，這樣就可以解決子父元件通訊的問題了。可以愉快的玩耍了~~


當然，我心血來潮自己實現了一種解決方案。Vue中推薦使用$emit進行回撥傳遞.....


同學們也可以自己嘗試寫一下jQuery版的回撥傳遞


相關文章