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>
原文地址:https://www.cnblogs.com/maycpou/p/14736711.html