回调函数 ? 那不是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版的回调传递


Logo

前往低代码交流专区

更多推荐