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>