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>