vue 子组件调用父组件的函数

子组件调用父组件的函数，使用$emit(eventName,[...args])，触发当前实例上的事件。附加参数都会传给监听器回调。

子组件

<template>
  <div>
    <div class="warp-mark" v-if="bingGoShow">
      <img src="../../assets/resources/common/bingo.jpg" alt="">
      <div class="again" @click="again">
        <img src="../../assets/resources/common/again.png" alt="">
      </div>
      <div class="nextStep">
        <img src="../../assets/resources/common/nextStep.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
   export default {
        data() {
            return{
                bingGoShow:true
            }
        },
        methods:{
            again(){
                this.$emit("onceAgain")
              },
        }
    }
</script>

 

父组件

<template>
    <div>
        <mark @onceAgain="again"></mark>
    </div>
</template>

<script>
import mark from '@/components/mark /mark .vue';
export default {
    methods:{
        again(){ alert("测试") }
    }

}


</script>