vue項目props傳值類型影響：單項數據流及雙向數據流

makeFoxPlay 發布于2019-08-26 10:24 / 1746人閱讀

摘要：簡單總結在使用傳遞數據的過程中，如果傳遞的是基本數據類型，則在子組件中不能修改父組件傳遞過來的值，此時符合的單向數據流方式如果傳遞的是引用型數據類型，則此時可以在子組件操作父組件傳遞過來的值，此時數據可以雙向通信，違背單向數據流方式。

第一：傳遞string、number等基本數據類型：
在構建vue項目中，props是子組件獲取父組件的一種形式；在子組件中不可修改父組件傳遞的參數，代碼如下：
1、父組件代碼：

2、子組件代碼：

注釋：
頁面展示子組件修改后的值：
“這是子組件
這是父組件的值：888”；
在子組件中，嘗試修改父組件傳遞過來的值，此時chrome控制臺會報錯:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop"s value. Prop being mutated: "fatherPassChild"；
同時，父組件中，打印的字段為修改之前的字段:
父傳子。

第二：傳遞數組、對象等引用型數據類型：
如果通過props傳遞引用數據類型，在子組件中改修父組件的屬性值，會出現什么情況？擼碼如下：
1、父組件代碼：

2、子組件代碼：

注釋：

此時，頁面展示的內容是子組件修改后；同時，控制臺并沒有報錯；why？

按照官網的解釋：

注意在 JavaScript 中對象和數組是通過引用傳入的，所以對于一個數組或對象類型的 prop 來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。

簡單總結：1、在使用props傳遞數據的過程中，如果傳遞的是基本數據類型，則在子組件中不能修改父組件傳遞過來的值，此時符合vue的單向數據流方式；

2、如果傳遞的是引用型數據類型，則此時可以在子組件操作父組件傳遞過來的值，此時數據可以雙向通信，違背單向數據流方式。

個人理解：props傳遞參數不同，導致子組件是否能更改父組件props傳遞的值；跟const聲明變量類似。

云服務器 GPU云服務器工資項目屬性數據類型云服務器搭建vue項目騰訊云服務器部署vue項目 vue項目放到云服務器上

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

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

簡單說說vue的父子組件，父子組件傳值和vuex

摘要：我們需要在里改動一下代碼首先就是綁定一個自定義事件再增加然后在中變成就是觸發父組件中的方法所以，觸發了父組件的函數，改變了父組件的的值，父組件再通過傳值給子組件。從而實現數據傳遞，父子組件通信。一、vue的父子組件之間是如何傳值的？首先呢，需要說說的是，vue既然有雙向綁定，那為何會有父子組件之間的傳值問題？這個問題也簡單，vue的組件會供其他的vue頁面進行調用，如果數組都是雙...

Tecode 2019-08-22 18:31 評論0 收藏0
前端MVVM模式及其在Vue和React中的體現

摘要：在模式中一般把層算在層中，只有在理想的雙向綁定模式下，才會完全的消失。層將通過特定的展示出來，并在控件上綁定視圖交互事件，一般由框架自動生成在瀏覽器中。三大框架的異同三大框架都是數據驅動型的框架及是雙向數據綁定是單向數據綁定。 MVVM相關概念 1） MVVM典型特點是有四個概念：Model、View、ViewModel、綁定器。MVVM可以是單向綁定也可以是雙向綁定甚至是不綁...

沈建明 2019-08-23 12:36 評論0 收藏0
VUE前端工程化（一）（掌握組件的多種通信及數據同步）

摘要：是一個事件，它向下傳播到當前實例的所有后代。由于后代擴展為多個子樹，事件傳播將會遵循許多不同的路徑。組件修改實現遞歸地在父鏈上傳播事件。組件通信父子組件通信父傳子 props屬性子傳父 $emit事件這兩種官方文檔里有很詳細的介紹就不解釋了還是舉個栗子： //parent.vue父組件 parent: {{money}} ...

Tony_Zby 2019-08-26 14:05 評論0 收藏0
Vue父子組件通信的三兩事（prop、emit）

摘要：的單向數據傳遞直接作為一個本地變量下面是我的子組件這是父組件給我傳的數據運行結果如下圖子組件向父組件傳遞數據基本使用子組件向父組件傳遞數據，不能像上面一樣實時的傳遞數據，必須通過事件觸發。組件是Vue核心功能之一，合理的組件化，可以減少我們代碼的冗余，提高項目的可維護性。下面，我將由淺入深的講Vue的組件在講之前，首先我們先了解一下組件的命名。 HTML是對特征名不敏感的語言，他...

darcrand 2019-08-23 14:56 評論0 收藏0
微信小程序學習與wepy框架的使用詳解

摘要：，至此咱們的微信小程序的簡單使用及了解算是分享完了，畢竟個人也是道行有限，沒有鉆研太深，這些只是本人在實際項目開發過程中用到和總結的經驗，有太多不足或不對的地方，希望大家多多給予指出與改正，咱們一起來共同學習與進步微信小程序是一種不需要下載安裝即可使用的應用，在國內它在企業推廣中的受歡迎度以及就這兩年的使用及普及熱度，然而就是因為它的備受歡迎度以及越來越被企業所重視，也就形成了咱們開...

sf190404 2019-08-29 16:09 評論0 收藏0