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>

 

转载于:https://www.cnblogs.com/oscar1987121/p/10490786.html