Vue 子組件調用父組件的方法

在這里就介紹一種，this.$emit('在父組件中，綁定的方法名稱'，'方法的參數，可傳多個，這個根據父所定義的方法參數而定')

 在這里就寫一個例子，孩子想吃蘋果，叫爸爸幫忙買蘋果的事件

父組件

<template>
  <div>
    <el-header>Header</el-header>
　　<!-- 這里的wantToEatAnApple 就等於孩子告訴爸爸，他想做的事情 -->
   <!-- 這里的goToBuySomeApples 就等於爸爸作出的回應，像這里孩子告訴爸爸想吃蘋果，那爸爸就要去買些蘋果回來  -->
　　<child @wantToEatApple="goToBuySomeApples"></child>
  </div>
</template>
<script>

<!-- 自定義的一個子組件 -->
import child from '@/components/Child'
export default {
  data () {
    return {
    }
  },
  components: {
　　// 有些朋友覺得這里奇怪，為什么不是 child: child,是因為 這里是Key 跟value一樣名字的時候的寫法 
    child
  },
  methods: {
　　// 這里的goToBuySomeApples 就是爸爸的回應，去買些蘋果回來，可以帶些參數，例如這里，只需要孩子告訴爸爸需要幾個就行，還可以加上種類等等的參數
    goToBuySomeApples (ammount) {
      //在這里就可以做些爸爸的去買蘋果的動作了
    }
  }
}
</script>

 

子組件

<template>
    <div>
　　　　<!-- 這里就等於點擊事件，電話給爸爸  -->
　　　　<div @click="callFather">call father</div>
　　</div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    callFather () {
　　　　//重點在這里，this.$emit()方法就等於拿起電話，打電話給爸爸，告訴自己的需求，在這里告訴爸爸，想吃蘋果'wantToEatApple',還要告訴他想吃多少個(參數)
 //這樣爸爸收到通知后，就會滿足孩子的需求
　　　　this.$emit('wantToEatApple', 1)
    }
  }
}
</script>