Vue子组件调用父组件的方法

本人是通过$emit的方法,实现子组件调用父组件的方法。在做项目的过程中,有遇到过,点击子组件想要调用父组件的方法的情况。可以借鉴一下下面的方法。

父组件代码部分:

<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log('123456test');
      }
    }
  };
</script>

子组件代码部分:

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fatherMethod');
      }
    }
  };
</script>