VUE組件間的數據傳遞

Half 發布于2019-08-21 17:43 / 2807人閱讀

摘要：是雖說吸取了的的思想，但是它是單向數據流的，也就是說子組件無法直接改變父組件狀態。父組件向子組件傳遞數據該方式的數據傳遞是遵循單向數據流的規則的，因此使用起來十分的自然。

眾所周知，Vue 是基于組件來構建 web 應用的。組件將模塊和組合發揮到了極致。Vue 是雖說吸取了 AngularJs 的 MVVM的思想，但是它是單向數據流的，也就是說子組件無法直接改變父組件狀態。下面總結出常用的組件消息傳遞的方式。

父組件向子組件傳遞數據

該方式的數據傳遞是遵循 Vue 單向數據流的規則的，因此使用起來十分的自然。若父組件的數據改變子組件的 UI 展現也隨之變化。
Parent.vue

Child.vue

效果如下：

子組件修改父組件的數據

這里介紹兩種方式：
1、子組件觸發事件，父組件監聽事件做出數據改變
2、父組件將數據變更方法以 props 的形式傳給子組件（借鑒 react 的父子通信方式）

監聽事件

父組件上通過 v-on 監聽子組件所觸發的事件。
EventParent.vue

EventChild.vue

效果如圖：

傳遞props

因為自己寫 react 較多，所以好奇 Vue 是否支持子組件回調父組件的事件處理函數，試了一下是可以的。好像 Element UI 使用該方式較多。個人認為該方法和事件方式同樣靈活。
Parent.vue

Child.vue

以 props 的這種方式大家可以嘗試實現一下是一種新的思路。

非父子組件間的通信

上述三個實例都在講述父子組件的通信，那么不相關的組件該如何通信呢？可以創建一個 Vue 的實例作為橋來中轉事件。
eventHub.js

import Vue from "vue";

export default new Vue();

Child01.vue

Child02.vue

效果如圖：

總結

父組件改變子組件的數據利用正常單向數據流的特性即可，子組件改變父組件的數據可以通過事件或者函數 props 兩種方式實現，非父子組件通信則利用 EventHub 中轉一下。

實例代碼

歡迎大家指正批評、或留言。QQ群：538631558

【開發環境推薦】Cloud Studio 是基于瀏覽器的集成式開發環境，支持絕大部分編程語言，包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等，無需下載安裝程序，一鍵切換開發環境。 Cloud Studio提供了完整的 Linux 環境，并且支持自定義域名指向，動態計算資源調整，可以完成各種應用的開發編譯與部署。

云服務器 GPU云服務器 vue組件 vue組件開發 vue父子組件通訊 vue輪播組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/89920.html

vue組件通信全面總結

摘要：當一個組件沒有聲明任何時，這里會包含所有父作用域的綁定和除外，并且可以通過傳入內部組件在創建高級別的組件時非常有用。寫在前面組件間的通信是是實際開發中非常常用的一環，如何使用對項目整體設計、開發、規范都有很實際的的作用，我在項目開發中對此深有體會，總結下vue組件間通信的幾種方式，討論下各自的使用場景文章對相關場景預覽父->子組件間的數據傳遞子->父組件間的數據傳遞兄弟...

余學文 2019-08-23 12:16 評論0 收藏0
幾種常見的Vue組件間的傳參方式

摘要：缺點用這種方法寫出來的組件十分難維護，因為你并不知道數據的來源是哪里，有悖于單向數據流的原則拿到的是一個數組，你并不能很準確的找到你要找的子組件的位置，尤其是子組件多的時候。幾種常見的Vue組件間的傳參方式 Vue父子組件通訊的方法其實有很多，本文只是做一個總結，說說他們的優缺點，具體如何使用相關文檔和網上大神已經總結的很多里，這里就不再說明。 1.Vuex 介紹 Vuex 是一個專...

TalkingData 2019-08-23 14:01 評論0 收藏0
Vue 組件間傳參最佳實踐

摘要：父子組件間的數據傳遞從父組件獲取子組件的數據通過綁定將父組件的數據關聯到子組件，并修飾或者用同步來自子組件的數據變化使用父組件子組件默認初始值是，所以是顯示的關閉父組件子組件綁定事件監聽器，當子組件狀態或者數據發生變化時，觸發事 1.父子組件間的數據傳遞 1.1從父組件獲取子組件的數據 1.1.1通過綁定 props 將父組件的數據關聯到子組件，并修飾 .sync 或者用 v-mode...

huashiou 2019-08-23 18:18 評論0 收藏0
vue學習筆記（三）

摘要：直接創建組件使用標簽名組件模板，根據組件構造器來創建組件。相應的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數據，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創建組件的兩種方式官方推薦組件標簽名是使用-連接的組合詞，例如：。 1、使用...

fsmStudy 2019-08-21 17:14 評論0 收藏0
vue學習筆記（三）

摘要：直接創建組件使用標簽名組件模板，根據組件構造器來創建組件。相應的，實例也被稱為父組件。而且不允許子組件直接修改父組件中的數據，強制修改會報錯。一、組件（一）什么是組件組件（Component）是 Vue.js最強大的功能之一。組件可以擴展 HTML元素，封裝可重用的代碼組件是自定義元素（對象）。（二）創建組件的兩種方式官方推薦組件標簽名是使用-連接的組合詞，例如：。 1、使用...

zsirfs 2019-08-01 17:51 評論0 收藏0