回调函数 ? 那不是UI框架才用的吗？有句话怎么讲来着，书到用时方恨少。平常我们撸Vue，感觉即使用props封装组件。。也很少自己制作回调这种看起来高大上的东西.......但是实际开发中封装组件并不是这样的。许多组件需要子父组件进行通信
让我们举个栗子：
产品经理有个需求，需要让你做一个优惠券列表。然后需要把优惠券列表封装成组件。在下单支付时，调用优惠券列表。然后选择其中一个，在父组件里获取选择的是哪张优惠券
这个需求看起来不难，但实际制作起来。。会发现有个问题：父组件如何获取优惠券列表组件选中了哪一张优惠券？
这时候许多初学Vue.js的童鞋可能就凌乱了.....不知道用什么方式进行数据交互,如果你没有了解过Vuex，可以了解一个东西：回调函数！
回调函数对于许多同学不陌生。ajax就是很好的例子
回调函数究竟是什么？回调函数就是一个参数，将这个函数作为参数传到另一个函数里面，当那个函数执行完之后，再执行传进去的这个函数。这个过程就叫做回调．通俗一点，就是把方法体当成参数传递给另一个方法体，然后另一个方法体内部执行传递的方法体。并支持传入参数.
话不多说，写个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版的回调传递
本文由 创作，采用 知识共享署名4.0 国际许可协议进行许可。本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。最后编辑时间为: 2021/12/29 09:55