Vue.js元件通訊

本篇介紹在Vue.js應用程式中如何讓元件彼此通訊。

• Props
• 從子元件到父元件透過事件通訊
• 使用事件巴士在任意元件之間通訊
• 其他替代方案

---

Vue元件可以使用不同的方式進行通訊。

Props

第一種方式是使用props。

父元件可以透過在元件宣告時加入參數，將資料傳遞給子元件：

<template>
 <div>
 <Car color="green" />
 </div>
</template>

<script>
import Car from './components/Car'

export default {
 name: 'App',
 components: {
 Car
 }
}
</script>

Props是單向的，只能由父元件傳送資料給子元件。當父元件改變prop的值時，新的值會被傳送給子元件並重新渲染。

反過來是不行的，子元件不應該去修改prop的值。

使用事件在子元件到父元件之間通訊

事件允許你從子元件向父元件進行通訊：

<script>
export default {
 name: 'Car',
 methods: {
 handleClick: function() {
 this.$emit('clickedSomething')
 }
 }
}
</script>

在父元件的template中，可以使用v-on指令來攔截這個事件：

<template>
 <div>
 <Car v-on:clickedSomething="handleClickInParent" />
 <!-- 或者 -->
 <Car @clickedSomething="handleClickInParent" />
 </div>
</template>

<script>
export default {
 name: 'App',
 methods: {
 handleClickInParent: function() {
 //...
 }
 }
}
</script>

當然，你也可以傳遞參數：

<script>
export default {
 name: 'Car',
 methods: {
 handleClick: function() {
 this.$emit('clickedSomething', param1, param2)
 }
 }
}
</script>

然後在父元件中接收這些參數：

<template>
 <div>
 <Car v-on:clickedSomething="handleClickInParent" />
 <!-- 或者 -->
 <Car @clickedSomething="handleClickInParent" />
 </div>
</template>

<script>
export default {
 name: 'App',
 methods: {
 handleClickInParent: function(param1, param2) {
 //...
 }
 }
}
</script>

使用事件巴士在任意元件之間通訊

使用事件不僅限於子元件和父元件之間的通訊。

你可以使用所謂的事件巴士。

在上面的例子中，我們使用了this.$emit在元件實例上觸發一個事件。

我們可以改為在一個更普遍訪問的元件上觸發這個事件。

Vue的根元件this.$root通常用於此種情況。

你也可以創建一個專門用於事件的Vue元件，然後在需要的地方引入。

<script>
export default {
 name: 'Car',
 methods: {
 handleClick: function() {
 this.$root.$emit('clickedSomething')
 }
 }
}
</script>

其他元件可以監聽這個事件，你可以在mounted回調中進行：

<script>
export default {
 name: 'App',
 mounted() {
 this.$root.$on('clickedSomething', () => {
 //...
 })
 }
}
</script>

其他替代方案

這是Vue原生提供的方法。

當你需要更進一步時，可以考慮使用Vuex或其他第三方庫。