Chat Vue callback function

This article is reproduced in: Ape 2048 Website ➩ https://www.mk2048.com/blog/blog.php?id=i1jbaabbkj

The callback function? That is not the only UI framework used for?

How words have come forward, hates few books to use when. We usually line and Vue, feeling that the use of props package assembly. . Rarely produce their own callback that looks something on the tall .......

However, the actual development of the packaging components is not so. Many components require child-parent components communicate

Let us take chestnuts:

There is a demand for a product manager, you need to make a list of coupons. You then need to coupon list encapsulated into components. At the next single payment, call the coupon list . Then select one of them, get selected in the parent component in which coupons

Coupon list of UI is roughly like this (with the example of the United States Mission):

This demand looks difficult, but actually making it. . You will find that there is a problem:

How to get a coupon parent component selected list of components which a coupon?

At this time many novice Vue.js of children's shoes might messy ..... I do not know in what way data exchange

If you do not find out about Vuex, you can learn a thing:

Callback!

The callback function for many students are not unfamiliar. ajax is a good example

What exactly is a callback function?

The callback function is a parameter, the function passed as a parameter to another function which, when the function is executed, and then pass in the execution of this function. This process is called callback

emmm ..... foggy. Popular that the parameters passed to the method body as another method body, then another method body method for performing transmission to the inner body. And support incoming parameters

He did not talk much, write a demo ==

First, let's define a  sub-assembly and packaging process

<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>

It then defines a parent component invokes subassembly

<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>

Well, we look at the results:

Aha, so that it can solve the problem of sub-components of the communication parent. You can have fun playing a ~~

Of course, my own whim to achieve a solution . Vue $ emit recommended to use a callback delivery .....

Students can also try to write about their own version of jQuery callback delivery