Vue子組件向父組件傳遞方法

一、props

對於Vue中的組件通信，子組件向父組件傳遞方法的常見方法是通過props。假設我們有一個父組件和一個子組件DemoChild，我們可以通過props屬性將父組件的方法傳遞給子組件。以下是示例代碼：

// 父組件
<template>
  <div>
    <DemoChild :doSomething="handleSomething"/>
  </div>
</template>

<script>
import DemoChild from './DemoChild.vue';

export default {
  components: { DemoChild },
  methods: {
    handleSomething() {
      console.log('This is handleSomething method!');
    }
  }
};
</script>

// 子組件
<template>
  <div @click="doSomething">Click me!</div>
</template>

<script>
export default {
  props: ['doSomething']
};
</script>

在父組件中，我們通過在子組件標籤上添加屬性:doSomething=”handleSomething”，將父組件中的方法傳遞給子組件。在子組件中，我們通過在props數組中聲明doSomething，來接收父組件傳遞的方法。在子組件的模板中，通過@click監聽click事件，並觸發doSomething方法。這時候就會調用父組件中的handleSomething方法。

二、$emit事件

除了使用props來傳遞方法，Vue還提供了另一種方式：使用$emit事件。利用$emit方法，子組件可以向父組件傳遞事件，並攜帶相應的數據。以下是示例代碼：

// 父組件
<template>
  <div>
    <DemoChild @do-something="handleSomething"/>
  </div>
</template>

<script>
import DemoChild from './DemoChild.vue';

export default {
  components: { DemoChild },
  methods: {
    handleSomething(data) {
      console.log(data); // 'Hello World!'
    }
  }
};
</script>

// 子組件
<template>
  <div @click="doSomething">Click me!</div>
</template>

<script>
export default {
  methods: {
    doSomething() {
      this.$emit('do-something', 'Hello World!');
    }
  }
};
</script>

在子組件中，我們通過Click me!觸發doSomething方法，並在方法中使用this.$emit(‘do-something’, ‘Hello World!’)向父組件傳遞do-something事件，並且攜帶數據’Hello World!’。在父組件中，我們通過@do-something=”handleSomething”捕獲do-something事件，並且在handleSomething方法中讀取攜帶的數據。

三、inject / provide

Vue還提供了一種高級的組件通信方式：通過inject / provide。當我們想要跨越多個級別的父子關係傳遞數據時，這種方式會非常有用。當我們在一個組件中定義了provide屬性後，這個組件的子孫組件都可以注入provide屬性，不管這些組件是否彼此存在父子關係。以下是示例代碼：

// 父組件
<template>
  <div>
    <DemoChild/>
  </div>
</template>

<script>
import DemoChild from './DemoChild.vue';

export default {
  provide: {
    doSomething: () => {
      console.log('This is handleSomething method!');
    }
  },
  components: { DemoChild }
};
</script>

// 子組件
<template>
  <div @click="doSomething">Click me!</div>
</template>

<script>
export default {
  inject: ['doSomething']
};
</script>

在父組件中，我們在provide屬性中定義了一個名為doSomething的方法。子組件DemoChild可以通過inject屬性來注入doSomething屬性，並在子組件模板中使用@click監聽click事件，並調用注入的doSomething方法。

四、事件匯流排

事件匯流排是一種非常靈活的組件通信方式，它可以支持任何組件之間的通信。Vue.js提供了一個全局事件匯流排Vue.prototype.$bus。任何Vue實例都可以通過this.$bus.$emit()來觸發一個事件，也可以通過this.$bus.$on()來監聽一個事件。以下是示例代碼：

// 事件匯流排實例
import Vue from 'vue';
export const eventBus = new Vue();

// 父組件
<template>
  <div>
    <DemoChild/>
  </div>
</template>

<script>
import DemoChild from './DemoChild.vue';

export default {
  components: { DemoChild },
  mounted() {
    this.$bus.$on('handle-something', this.handleSomething);
  },
  beforeDestroy() {
    this.$bus.$off('handle-something', this.handleSomething);
  },
  methods: {
    handleSomething() {
      console.log('This is handleSomething method!');
    }
  }
};
</script>

// 子組件
<template>
  <div @click="doSomething">Click me!</div>
</template>

<script>
import { eventBus } from '@/event-bus.js';

export default {
  methods: {
    doSomething() {
      eventBus.$emit('handle-something');
    }
  }
};
</script>

在父組件中，我們通過this.$bus.$on(‘handle-something’, this.handleSomething)監聽名為handle-something的事件，並且在事件觸發時，調用handleSomething方法。在子組件中，我們通過eventBus.$emit(‘handle-something’)觸發handle-something事件。事件匯流排可以說是Vue組件通信中最靈活的一種方式，但也需要注意事件名稱不要重複，否則會影響其他組件的正常工作。