Vue子组件调用父组件事件的三种方法

• 1. 在子组件中通过this.$parent.event来调用父组件的方法，data参数可选

<template>
  <div>
    <h1>我是父组件</h1>
    <child />
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>

<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="childMethod(data)">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod(data);
        console.log('调用父组件方法')
      }
    }
  };
</script>

• 2. 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件，data参数可选

<template>
  <div>
    <h1>我是父组件</h1>
    <child @fatherMethod="fatherMethod"/>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>

<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="childMethod(data)">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod(data) {
       this.$emit('fatherMethod', data);
        console.log('调用父组件方法')
      }
    }
  };
</script>

• 3. 父组件通过props把方法传入子组件中，在子组件里直接调用这个方法，data参数可选

<template>
  <div>
    <h1>我是父组件</h1>
    <child :fatherMethod="fatherMethod" />
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>

<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="childMethod(data)">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod(data) {
        if (this.fatherMethod) {
          this.fatherMethod(data);
          console.log('调用父组件传递的方法')
        }
      }
    }
  };
</script>