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

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

子传父数据方式如下

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

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

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

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

 

    {{count}}

    

  

  

    

      加一

      减一

    

  

  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

    }})