聊一聊Vue中的回调函数

时间：2024-11-10 17:33:56

回调函数 ? 那不是UI框架才用的吗？

有句话怎么讲来着，书到用时方恨少。平常我们撸Vue，感觉即使用props封装组件。。也很少自己制作回调这种看起来高大上的东西.......

但是实际开发中封装组件并不是这样的。许多组件需要子父组件进行通信

让我们举个栗子：

产品经理有个需求，需要让你做一个优惠券列表。然后需要把优惠券列表封装成组件。在下单支付时，调用优惠券列表。然后选择其中一个，在父组件里获取选择的是哪张优惠券

优惠券列表的UI大致是这样子（以美团的示例）：




这个需求看起来不难，但实际制作起来。。会发现有个问题：

父组件如何获取优惠券列表组件选中了哪一张优惠券？

这时候许多初学的童鞋可能就凌乱了.....不知道用什么方式进行数据交互


如果你没有了解过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是子组件给的参数
        = val; //献给data一份问候~
        (val,"in params"); //看看参数有没有值
        (,"in data"); //看看能不能给父组件的data传进去
      }
    }
  }
</script>
复制代码

好了，我们来看看结果：




啊哈，这样就可以解决子父组件通信的问题了。可以愉快的玩耍了~~


当然，我心血来潮自己实现了一种解决方案。Vue中推荐使用$emit进行回调传递.....


同学们也可以自己尝试写一下jQuery版的回调传递


相关文章