Vue----自定义事件

---

1 自定义事件

在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。

2 自定义事件的 3 个使用步骤

在封装组件时：

① 声明自定义事件
② 触发自定义事件

在使用组件时：

③ 监听自定义事件

2.1 声明自定义事件

开发者为自定义组件封装的自定义事件，必须事先在 emits 节点中声明。

<template>
  <div>
    <h3>Counter 组件</h3>
    <button> +1 </button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  // Counter 组件的自定义事件必须事先声明到 emits 节点中
  emits: ['change']
}
</script>

<style>

</style>

2.2 触发自定义事件

在 emits 节点下声明的自定义事件，可以通过 this.$emit(‘自定义事件的名称’) 方法进行触发。

<template>
  <div>
    <h3>Counter 组件</h3>
    <p>{{ count }}</p>
    <button @click="add"> +1 </button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0
    }
  },
  // Counter 组件的自定义事件必须事先声明到 emits 节点中
  emits: ['change'],
  methods: {
    // 当点击 +1 按钮时，调用 add 方法，this.$emit( 'change' ) 触发change事件
    add() {
      this.count++
      this.$emit( 'change' )
    }
  }
}
</script>

<style>

</style>

2.3 监听自定义事件

在使用自定义的组件时，可以通过 v-on 的形式监听自定义事件。

<template>
  <div>
    <h1>App 组件</h1>
    <counter @change="getCount"></counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  name: 'App',
  components: {
    Counter
  },
  methods: {
    getCount() {
      console.log('监听到了change事件')
    }
  }
}
</script>

<style>

</style>

3 自定义事件传参

在调用 this.$emit() 方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参。

<template>
  <div>
    <h3>Counter 组件</h3>
    <p>{{ count }}</p>
    <button @click="add"> +1 </button>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  data() {
    return {
      count: 0
    }
  },
  // Counter 组件的自定义事件必须事先声明到 emits 节点中
  emits: ['change'],
  methods: {
    // 当点击 +1 按钮时，调用 add 方法，this.$emit( 'change' ) 触发change事件
    add() {
      this.count++
      // 触发自定义事件，并且传参
      this.$emit( 'change', this.count )
    }
  }
}
</script>

<style>

</style>

在App组件中监听change事件，接收参数。

<template>
  <div>
    <h1>App 组件</h1>
    <p> App-counter: {{ count }} </p>
    <counter @change="getCount"></counter>
  </div>
</template>

<script>
import Counter from './Counter.vue'

export default {
  name: 'App',
  data() {
    return {
      count: 0
    }
  },
  components: {
    Counter
  },
  methods: {
    // 监听change事件，并接收参数
    getCount( sonCount ) {
      console.log('监听到了change事件')
      this.count = sonCount
    }
  }
}
</script>

<style>

</style>