如何在 Vue 中使用组件间的通信？

Vue 是一個非常強大的 JavaScript 框架，它可以讓開發者快速開發出高品質的 Web 應用程式。Vue 提供了一系列的工具來讓開發者更容易地開發出可重用的組件，其中之一就是組件間的通信。

在 Vue 中，組件間的通信可以通過兩種方式實現：props 和 events。

Props

Props 是 Vue 中最常用的組件間通信方式，它可以讓父組件向子組件傳遞數據。

例如，假設我們有一個父組件 Parent，它有一個子組件 Child，我們可以在 Parent 中定義一個 message 的 prop，然後在 Child 中使用它：

<template>
  <div>
    <Child :message="message" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello World!'
    }
  },
  components: {
    Child
  }
}
</script>

在 Child 中，我們可以使用 this.message 來訪問 message prop：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

Events

Events 是另一種組件間通信的方式，它可以讓子組件向父組件傳遞數據。

舉例來說，假設我們有一個父組件 Parent，它有一個子組件 Child，我們可以在 Child 中定義一個 onClick 的事件，然後在 Parent 中使用它：

<template>
  <div>
    <Child @onClick="handleClick" />
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(data) {
      // do something with data
    }
  },
  components: {
    Child
  }
}
</script>

在 Child 中，我們可以使用 this.$emit('onClick', data) 來觸發 onClick 事件：

<template>
  <div @click="handleClick">Click me!</div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      this.$emit('onClick', { message: 'Hello World!' })
    }
  }
}
</script>

總結

Vue 提供了一系列的工具來讓開發者更容易地開發出可重用的組件，其中之一就是組件間的通信。Vue 中最常用的組件間通信方式是 props，它可以讓父組件向子組件傳遞數據；另一種方式是 events，它可以讓子組件向父組件傳遞數據。

Categorized in:

vuevue.js

Tagged in:

,