vue中子组件调用父组件的方法

1.子组件通过this.$parent.event来调用父组件的方法
父组件

<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from './child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(str) {
        console.log(str);
      }
    }
  };
</script>

子组件

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

2.子组件里用$emit向父组件触发一个事件，父组件监听即可
父组件

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

子组件

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

3.父组件将这个方法传入子组件，在子组件中直接调用
父组件

<template>
  <div>
    <child :fatherMethod="fatherMethodOther"></child>
  </div>
</template>
<script>
  import child from './child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethodOther(str) {
        console.log(str);
      }
    }
  };
</script>

子组件

<template>
  <div>
    <button @click="childMethod">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod('hello');
        }
      }
    }
  };
</script>