Vue3 組件通信：從基礎到高級

一、props

Vue3 中的組件通信最基礎的方式就是通過 props 來進行父子組件之間的數據通信。在父組件中使用 v-bind 來將數據傳遞給子組件，子組件通過 props 來接收傳遞過來的數據。

// 父組件
<template>
  <child-component :message="message"></child-component>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

// 子組件
<template>
  <p>{{message}}</p>
</template>
<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

在上面的例子中，父組件通過 v-bind 將 message 這個數據傳遞給了子組件，子組件通過 props 來接收了這個數據並進行渲染。在 props 中我們還可以設置傳遞的值的類型、是否必填等參數。

二、emit

除了從父組件到子組件的單向傳遞數據外，我們還需要進行反向的數據傳遞。可以通過自定義事件（emit）來實現子組件向父組件傳遞數據。

// 子組件
<template>
  <button v-on:click="handleClick">Click me</button>
</template>
<script>
export default {
  methods: {
    handleClick() {
      this.$emit('message', 'Hello World')
    }
  }
}
</script>

// 父組件
<template>
  <child-component @message="handleMessage"></child-component>
</template>
<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message)
    }
  }
}
</script>

在上面的例子中，子組件通過 $emit 來觸發自定義事件 message 並將數據傳遞給了父組件，父組件通過 v-on 來監聽該事件並獲取子組件傳遞過來的數據。

三、provide / inject

Vue3 中新增了一個 provide / inject API 來進行祖先組件向後代組件的數據傳遞。

// 祖先組件
<template>
  <child-component></child-component>
</template>
<script>
export default {
  provide() {
    return {
      message: 'Hello World'
    }
  }
}
</script>

// 後代組件
<template>
  <p>{{message}}</p>
</template>
<script>
export default {
  inject: ['message']
}
</script>

在上面的例子中，祖先組件通過 provide 來提供一個名為 message 的值給其所有後代組件，在後代組件中通過 inject 來接收這個值。

四、ref / $refs

在 Vue3 中，可以在父組件中通過 ref 來獲取子組件的實例對象，從而可以在父組件中調用子組件的方法或獲取子組件的數據。

// 父組件
<template>
  <child-component ref="child"></child-component>
</template>
<script>
export default {
  mounted() {
    this.$refs.child.sayHello()
  }
}
</script>

// 子組件
<script>
export default {
  methods: {
    sayHello() {
      console.log('Hello World')
    }
  }
}
</script>

在上面的例子中，父組件使用 ref 來獲取子組件的實例對象，從而可以在 mounted 鉤子函數中調用子組件的 sayHello 方法。

五、Teleport

在 Vue3 中，Teleport 組件可以實現在任意地方渲染組件，並保持父子組件間的關係，可以用於實現一些彈窗組件等。

// 父組件
<template>
  <button v-on:click="openDialog">Open Dialog</button>
  <teleport to="body">
    <dialog :visible="isDialogVisible" @close="closeDialog"></dialog>
  </teleport>
</template>
<script>
import { ref } from 'vue'
import Dialog from './Dialog.vue'

export default {
  components: {
    Dialog
  },
  setup() {
    const isDialogVisible = ref(false)

    function openDialog() {
      isDialogVisible.value = true
    }

    function closeDialog() {
      isDialogVisible.value = false
    }

    return {
      isDialogVisible,
      openDialog,
      closeDialog
    }
  }
}
</script>

// 子組件 - Dialog
<template>
  <div v-if="visible">
    <button v-on:click="$emit('close')">Close Dialog</button>
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  props: {
    visible: {
      type: Boolean,
      required: true
    }
  },
})
</script>

在上面的例子中，Teleport 組件通過 to 屬性來指定要渲染的位置，在這裡我們指定為 body。在父組件中點擊按鈕，會觸發 openDialog 方法從而顯示 Dialog 組件，Dialog 組件中通過 $emit 來觸發 close 事件從而將 Dialog 關閉。

總結

本文介紹了 Vue3 中五種常用的組件通信方式：props、emit、provide / inject、ref / $refs 和 Teleport。在實際開發中，應根據場景選擇合適的通信方式來進行組件間的數據傳遞，以實現更高效的應用。