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>