Vue.js 組件 – 父子組件通信

Vue.js 是一個輕量級的 JavaScript 框架，它可以讓開發者快速開發出優秀的網頁應用程式。Vue.js 的組件系統可以讓開發者更加容易地將應用程式分解成可重用的組件，並且可以讓父子組件之間進行通信。

父子組件之間的通信

Vue.js 的組件系統可以讓開發者將應用程式分解成可重用的組件，並且可以讓父子組件之間進行通信。父子組件之間的通信可以通過 props 來實現，props 是一種將數據從父組件傳遞到子組件的方法。

例如，我們可以在父組件中定義一個 message 的 prop，並將它傳遞給子組件：

Vue.component('parent-component', {
  props: ['message'],
  template: '
'
})

子組件可以使用 props 接收父組件傳遞過來的數據：

Vue.component('child-component', {
  props: ['message'],
  template: '
{{ message }}
'
})

子組件也可以使用 $emit 方法將數據傳遞給父組件：

Vue.component('child-component', {
  props: ['message'],
  template: '
{{ message }}
',
  methods: {
    sendMessageToParent() {
      this.$emit('send-message', 'Hello from child component!')
    }
  }
})

父組件可以使用 $on 方法接收子組件傳遞過來的數據：

Vue.component('parent-component', {
  props: ['message'],
  template: '
',
  methods: {
    receiveMessageFromChild(message) {
      console.log(message)
    }
  },
  created() {
    this.$on('send-message', this.receiveMessageFromChild)
  }
})

父子組件之間的通信是 Vue.js 組件系統的一個重要特性，它可以讓開發者更加容易地將應用程式分解成可重用的組件。

總結

Vue.js 的組件系統可以讓開發者將應用程式分解成可重用的組件，並且可以讓父子組件之間進行通信。父子組件之間的通信可以通過 props 和 $emit 方法來實現，它可以讓開發者更加容易地將應用程式分解成可重用的組件。