vue自定义事件

vue自定义事件用法

新建一个Count.vue组件 代码如下：

<template>
  <div>
    <h4>Count组件{{ count }}</h4>
    <button @click="add">按钮+1</button>
  </div>
</template>
<script>
export default {
  //声明自定义事件
  emits: ['countChange'],
  data() {
    return {
      count: 0
    }
  },
  methods: {
    add() {
      this.count++
      this.$emit('countChange', this.count)
    }
  },
  //解绑事件
  beforeDestroy() {
    this.$off('countChange', this.count)
  }
}
</script>

在App.vue组件使用Count组件

<template>
  <div id="app">
    <Count @countChange="getCount" />
  </div>
</template>
<script>
import Count from './components/Count.vue'
export default {
  name: 'App',
  components: {
    Count
  },
  methods: {
    getCount(value) {
      console.log('监听到了count的变化', value)
    }
  }
}
</script>