API (opens new window)

子组件通过$emit派发事件和值给父组件（值可以有多个）

this.$emit('fnX', value)

父组件通过v-on绑定子组件派发的事件，并触发一个新的事件，新的事件内可以接收传来的值

<ComponentName @fnX="fnY"></ComponentName>

methods: {
  fnY(value) {
    console.log(value)
  }
}

父子组件间传递数据 demo

<div id="root">
  <counter :count="0" @change="handleChange"></counter> +
  <counter :count="1" @change="handleChange"></counter> = <span>{{total}}</span>
</div>

<script>
const counter = {
  props: ['count'], // 接收父组件传来的值
  data() {
    return {
      number: this.count // 拷贝prop值的副本，用于修改
    }
  },
  template: '<button @click="handleClick()">{{number}}</button>',
  methods: {
    handleClick() {
      this.number++ // 由于单向数据流，不能直接修改prop的值
      this.$emit('change', 1) // 派发事件并传出值，值可以有多个
    }
  }
}
const vm = new Vue({
  el: '#root',
  data: {
   total: 1
  },
  components: {
    counter
  },
  methods: {
    handleChange(step) {
      // step 子组件传来的值
      this.total += + step
    }
  }
})
</script>