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

1.在子组件中用this.$parent.fn()来调用父组件的方法
父组件中

<script>
  export default {
    methods: {
      parentFn() {
        console.log('父组件的方法');
      }
    }
  };
</script>

子组件中

<template>
  <div>
    <div @click="handleClick()">点击</div>
  </div>
</template>
<script>
  export default {
    methods: {
      handleClick() {
        this.$parent.parentFn()
        //点击按钮执行父组件中的parentFn方法
      }
    }
  };
</script>

2.在子组件中用this.$emit(‘自定义事件’)向父组件抛发一个自定义事件，父组件监听这个事件
父组件中

<template>
  <div>
    <Child @childEvent="parentFn()"></Child >
  </div>
</template>
<script>
  export default {
    methods: {
      parentFn() {
        console.log('父组件的方法');
      }
    }
  };
</script>

子组件中

<template>
  <div>
    <div @click="handeClick()">点击</div>
  </div>
</template>
<script>
  export default {
    methods: {
      handeClick() {
        this.$emit('childEvent')
        //点击按钮执行父组件中的parentFn方法
      }
    }
  };
</script>

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

<template>
  <div>
    <Child :parentFn="parentFn"></Child >
  </div>
</template>
<script>
import Child from '@/components/Child ';
export default {
 	components: {
      Child 
    },
    methods: {
      parentFn() {
        console.log('父组件的方法');
      }
    }
  };
</script>

子组件中

<template>
  <div>
    <div @click="handeClick()">点击</div>
  </div>
</template>
<script>
  export default {
  	props: {
      parentFn: {
        type: Function,
        default: null
      }
    },
    methods: {
      handeClick() {
      	this.parentFn()
        //点击按钮执行父组件中的parentFn方法
      }
    }
  };
</script>