好程式設計師web前端教程分享三大前端框架相關問題

　　好程式設計師 web 前端教程分享 三大前端框架 相關問題， 三大前端框架，有沒有哪個框架的元件間互動像 js 的方法傳值一樣簡單？

　　 首先框架元件通訊是為了方便元件模組之間進行資料互動的，因為框架的開發本就是元件化，模組化開發，講一個完整的專案分割成不同的元件， view 元件，功能元件等等，然後形成一個具有完整功能互動的 page ，前端三大主流框架無異於 vue ， react ， angular ， vue 版本分為 1.0 以及 2.0 ，目前 3.0 版本正在開發中， react 的開發版本無異於 15 以及 16 ， angular 的版本相對來說就比較多， angularjs 也就是 1 ， angular2 、 4 、 5 、 6 、 8 等，除了 angular1 不是元件化開發外，其餘均是元件化開發，在不同版本中，元件通訊傳值亦是不一樣的。

　　 在 vue 中，元件通訊分為巢狀元件，父元件 - 子元件，子元件 - 父元件，以及兄弟元件通訊，還有多元件集中資料共享。最為常見的這幾種傳值中，父元件 - 子元件依賴於繫結屬性以及 props 屬性，子元件 - 父元件依賴於繫結事件， $emit 以及回撥函式，如果想要直接獲得當前父元件以及子元件可以藉助 ref 屬性，以及 $parent 來直接拿到父子物件，進行資料獲取。兄弟元件則完全依賴於 $emit ， $on 兩個語法進行資料傳值。如果元件過多共享資料的情況下，便要使用 vuex 來進行集中管理。 Vue 中的通訊相對於 js 的通訊來說遵循了自己內部的語言規範。對於 react 框架來說，完全是 class 物件的開發，繼承 react 宣告元件語法物件、無論父子還是子父通訊，都完全依賴於元件物件上進行 prop 屬性的繫結，進行 state 資料傳遞，因為在 react 中資料傳遞的載體就是 prop 以及 state ，所以元件通訊更加依賴於這兩個物件。對於多元件的資料集中管理，可以使用 redux ， flux 等工具，流程化管理集中資料，更加方便元件資料的共享。對於 angular 來說 1 版本中基本不提供元件化開發，所有資料互動均透過 scope 物件橋接，在 2 版本以後， angular 引入元件化開發，其父子元件通訊也完全依賴於 angular 提供的豐富的核心庫，藉助裝飾器 input 、 output ， eventemitter 中 emit 方法以及屬性式指令配合來完成父子以及子父通訊。

　　 總而言之，框架是基於 js 開發的，形成了自己內部的一種宣告規範，元件傳值也依賴於自己內部 api 規範來執行。都是對於 js 做了二次的封裝或者抽象。瞭解框架的 api 核心語言，元件傳值還是比較容易實現的。