vue(15)子组件与父组件通信 调用父组件的方法并传递参数
子组件：发出事件
<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>
