<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>