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

Vue.js 是一個輕量級的 JavaScript 框架，它可以讓開發者快速開發出高品質的 Web 應用程式。Vue.js 提供了一個簡單而強大的方式來實現組件間的通信，讓開發者可以更輕鬆地開發出多層次的應用程式。

Vue 的組件通信方式

Vue 提供了多種組件間通信的方式，包括 props、events、$emit、$on、$parent 和 $children 等。

props

props 是 Vue 中最常用的組件間通信方式，它可以讓父組件傳遞數據給子組件，子組件可以通過 props 接收父組件傳遞的數據。

// 父組件
Vue.component('parent-component', {
  template: '
',
  data: function () {
    return {
      message: 'Hello World!'
    }
  }
})

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

events

events 是 Vue 中另一種常用的組件間通信方式，它可以讓子組件發送事件給父組件，父組件可以通過 $on 方法來接收子組件發出的事件。

// 父組件
Vue.component('parent-component', {
  template: '
',
  methods: {
    handleSend: function (data) {
      console.log(data)
    }
  }
})

// 子組件
Vue.component('child-component', {
  template: '
',
  methods: {
    handleClick: function () {
      this.$emit('send', 'Hello World!')
    }
  }
})

總結

Vue.js 提供了多種組件間通信的方式，包括 props、events、emit、on、parent 和children 等，開發者可以根據自己的需求來選擇合適的組件間通信方式，以實現多層次的應用程式。

更多資源

Categorized in:

vuevue.js

Tagged in:

,