子组件
<template>
<div>
<button @click="increment">{{count}}</button>
</div>
</template>
<script>
export default{
name:'Son',
data(){
return{
count:0
}
},
methods:{
increment(){
this.count++
this.$emit('sonIncrement',this.count)
}
}
}
</script>
<style>
</style>
这里在子组件中定义了一个函数,通过$emit发出一个事假,可以带参数。如果带了参数,在父组件中也需要写上参数来接收。
父组件
<template>
<son @sonIncrement="fatherIncrement">{{fatherCount}}</son>
</template>
<script>
import {Son} from './Son.vue'
export default{
name:"father",
data(){
return{
fatherCount:0
}
},
methods:{
fatherIncrement(item){
this.fatherCount = item
}
},
components:{
Son
}
}
</script>
<style>
</style>
父组件绑定子组件发出的事假,因为我子组件发出代理参数,那么在父组件对应的处理函数就要写上参数。