子组件:发出事件
<template>
<div>
<button @click="count(1)">+</button>//点击调用本身定义的count方法,传入参数1
</div>
</template>
<script>
export default ({
data:function(){
},
methods:{
count(data){
this.$emit('countEvent',data);//调用父组件的countEvent事件,将data变量作为参数传入
}
}
})
</script>
<style scoped>
</style>
父组件:接收事件
<template>
<div>
{{count}}//显示变量count到页面上
<HelloWorld @countEvent="countFun"></HelloWorld>//定义countEvent事件,将事件绑定到自己的方法countFun上
</div>
</template>
<script>
import HelloWorld from './component/HelloWorld'
export default {
name:"App",
data:function(){
return {
count:1//定义count变量,初始值为1
};
},
components:{
HelloWorld
},
computed:{
},
methods:{
countFun(data){//子组件发出事件后,父组件的这个事件绑定到了countFun方法,相当于子组件调用了父组件的countFun方法并出入参数
this.count = this.count+data;//在方法中根据子组件传入的值改变父组件定义的count变量
}
}
}
</script>
<style scoped>
</style>