Article directory
1 custom event
When encapsulating a component, in order to allow the user of the component to monitor the changes in the state of the component, the custom event of the component needs to be used at this time.
2 3 steps to use custom events
When wrapping components:
① Declare custom events
② Trigger custom events
When using components:
③ Listen for custom events
2.1 Declare custom events
The custom event packaged by the developer for the custom component must be declared in the emits node in advance.
<template>
<div>
<h3>Counter 组件</h3>
<button> +1 </button>
</div>
</template>
<script>
export default {
name: 'Counter',
// Counter 组件的自定义事件必须事先声明到 emits 节点中
emits: ['change']
}
</script>
<style>
</style>
2.2 Trigger custom events
The custom event declared under the emits node can be triggered by the this.$emit('name of the custom event') method.
<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 Listen to custom events
When using custom components, you can listen to custom events in the form of 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 Custom event parameters
When calling this.$emit() method to trigger a custom event, you can pass parameters for the custom event through the second parameter.
<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>
Listen to the change event in the App component and receive parameters.
<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>
