了解Vue.js兄弟組件之間的通信

作者:

了解Vue.js兄弟組件之間的通信

目錄

Vue.js 兄弟组件的通信

Vue.js 是一個輕量級的 JavaScript 框架，它可以讓開發者快速開發出高品質的 Web 應用程式。Vue.js 提供了一個簡單的方法來建立兄弟組件之間的通信，讓開發者可以在不同的組件之間共享資料和方法。

在 Vue.js 中，兄弟組件之間的通信可以透過兩種方式來完成：

  1. 使用 $emit 來傳遞資料
  2. 使用 $on 來接收資料

使用 $emit 來傳遞資料

$emit 是 Vue.js 中用於傳遞資料的方法，它可以讓開發者在不同的組件之間傳遞資料。

舉個例子，假設我們有一個父組件 Parent 和一個子組件 Child，我們可以使用 $emit 來從 Child 組件傳遞資料到 Parent 組件：

// Child.vue
export default {
  methods: {
    sendData() {
      this.$emit('sendData', {
        data: 'Hello World!'
      });
    }
  }
}
Vue
// Parent.vue
export default {
  methods: {
    receiveData(data) {
      console.log(data); // { data: 'Hello World!' }
    }
  },
  components: {
    Child
  }
}
Vue

使用 $on 來接收資料

$on 是 Vue.js 中用於接收資料的方法，它可以讓開發者在不同的組件之間接收資料。

舉個例子，假設我們有一個父組件 Parent 和一個子組件 Child，我們可以使用 $on 來從 Parent 組件接收 Child 組件傳遞的資料：

// Child.vue
export default {
  methods: {
    sendData() {
      this.$emit('sendData', {
        data: 'Hello World!'
      });
    }
  }
}
Vue
// Parent.vue
export default {
  methods: {
    receiveData(data) {
      console.log(data); // { data: 'Hello World!' }
    }
  },
  components: {
    Child
  },
  created() {
    this.$on('sendData', this.receiveData);
  }
}
Vue

總結來說，Vue.js 提供了一個簡單的方法來建立兄弟組件之間的通信，讓開發者可以在不同的組件之間共享資料和方法。使用 $emit 來傳遞資料，使用 $on 來接收資料，就可以輕鬆地在不同的組件之間進行通信。

推薦閱讀文章

Vue.js 兄弟组件的通信
如何在 Vue.js 中傳遞資料
如何在 Vue.js 組件之間溝通
Vue.js 組件通信
Vue.js 組件通信</a

延伸閱讀本站文章

更多vue相關文章

推薦學習youtube影片

發佈留言