聊一聊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版的回调传递