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

第一种在子组件中通过this.$parent.event来调用；

父组件：

<template>
  <div>
    <testchild></testchild>
  </div>
</template>
<script>
  import testchild from "./testchild";
  export default {
    components: {
      testchild
    },
    methods: {
      fatherFun(obj) {
        alert('我是父组件的方法'+obj);
      }
    }
  };
</script>

子组件：

<template>
  <div>
    <button @click="childFun('1111')">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childFun(obj) {
        this.$parent.fatherFun(obj);//调用父组件中的方法
      }
    }
  };
</script>

第二种是在子组件中用this.$emit

父组件：

<template>
  <div>
    <testchild @fatherFun="fatherFun"></testchild>
  </div>
</template>
<script>
  import testchild from './testchild';
  export default {
    components: {
      testchild
    },
    methods: {
      fatherFun(obj) {//带参数形式
        console.log('测试');
        console.log(obj)
      }
    }
  };
</script>

子组件：

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

第三种是把父组件的方法传到子组件中，在子组件中直接调用

父组件：

<template>
  <div>
    <testchild :fatherFun="fatherFun"></testchild>
  </div>
</template>
<script>
  import testchild from './testchild';
  export default {
    components: {
      testchild
    },
    methods: {
      fatherFun(obj) {
        console.log('测试111');
        console.log(obj)
      }
    }
  };
</script>

子组件：

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

以上三种方法，亲测好用！