vue父子组件之间$emit的数据通信

父子组件通信中，父传子是使用v-blind绑定props传递由上向下传递数据，那么子传父是通过v-on绑定自定义事件由emit发生接受数据的。

子传父数据方式如下

①在子组件的标签内使用v-on：click绑定一个方法并将值通过方法传递

②在子组件的methods中定义子组件标签定义的方法，使用this.$emit将一个自定义的事件和值发射出去

③在父组件调用子组件的标签上使用v-on绑定子组件发生的事件，并绑定一个方法，在父组件的methods定义方法接受子组件传递的值

因为这是一个自定义的事件，所以不会有默认的event事件，这和系统默认的事件是不同的，这里默认的是子组件传递值

 <div id="app">

    {{count}}

    <com @numadd="addclick" @numdec="decclick"></com>

  </div>

  <template id="templateId">

    <div>

      <button @click="addclick">加一</button>

      <button @click="decclick">减一</button>

    </div>

  </template>

  let com = {

    template: "#templateId",

    methods: {

      addclick(e) {

        console.log(e);

        this.$emit("numadd", e)

      }, decclick(e) {

        this.$emit("numdec", e)

      }},}

  const vm = new Vue({

    el: "#app",

    data: {

      count: 0

    },

    methods: {

      addclick() {

        this.count++

      }, decclick() {

        this.count--

      }},

    components: {

      com

    }})