Vue和React元件之間的傳值方式
在現代的三大框架中,其中兩個Vue和React框架,元件間傳值方式有哪些?
元件間的傳值方式
元件的傳值場景無外乎以下幾種:
- 父子之間
- 兄弟之間
- 多層級之間(孫子祖父或者更多)
- 任意元件之間
父子之間
Vue
Vue是基於單項資料流設計的框架,但是提供了一些的語法,指令去實現一些操作
父->子:通過props進行傳遞資料給子元件
子->父:通過emit向父元件傳值
同時,還有一些其他進行父子元件通訊的方式,通過$parent和$children獲取元件的父或者子元件的例項,之後通過例項物件去修改元件的屬性。在表單控制元件中,使用v-model實現了雙向資料繫結,其實這裡v-model是一個語法糖,內部實現還是監聽了表單控制元件的change事件,然後將資料傳遞給元件修改資料,從而實現了雙向資料繫結。
React
父->子:通過props將資料傳遞給子元件
子->父:通過父元件向子元件傳遞函式,然後子元件中呼叫這些函式,利用回撥函式實現資料傳遞
兄弟之間
Vue
在Vue中,可以通過查詢父元件下的子元件例項,然後進行元件進行通訊。如this.$parent.$children
,在$children
中,可以通過元件的name找到要通訊的元件,進而進行通訊。
React
在React中,需要現將資料傳遞給父元件,然後父元件再傳遞給兄弟元件。
多層級元件
Vue
在多層級的元件中,當然可以通過不斷的獲取$parent
找到需要傳遞的祖先級元件,然後進行通訊,但是這樣繁瑣易錯,並不推薦。Vue在2.2.0 新增提供了provide/inject的方式進行傳遞資料。即在祖先元件提供資料,在需要使用的元件中,注入資料,這樣就可以在子元件中使用資料了。provide/inject文件
// 父級元件提供 'foo' var Provider = { provide: { foo: 'bar' }, // ... } // 子元件注入 'foo' var Child = { inject: ['foo'], created () { console.log(this.foo) // => "bar" } // ... }
React
在React中,提供了一個和Vue類似的處理多層級元件通訊的方式——context
,這裡會提供一個生產者和一個消費者,會在父元件中生產資料,在子元件中消費資料。從使用上來說,只需要將子元件包裹在生產者的Provider
中,在需要用到資料的子元件中,通過Consumer
包裹,就可以拿到生產者的資料。context文件
// Theme context, default to light theme const ThemeContext = React.createContext('light'); class App extends React.Component { render() { const {signedInUser, theme} = this.props; // App component that provides initial context values return ( <ThemeContext.Provider value={theme}> <Layout /> </ThemeContext.Provider> ); } } function Layout() { return ( <div> <Sidebar /> <Content /> </div> ); } // A component may consume multiple contexts function Content() { return ( <ThemeContext.Consumer> {theme => ( <ProfilePagetheme={theme} /> )} </ThemeContext.Consumer> ); }
任意元件之間
Vue
對於任意元件,簡單的可以使用EventBus,對於更為複雜的建議使用Vuex。
React
簡單的使用EventBus,複雜的使用Redux
總結
當然,元件間的傳值是靈活的,可以有多種途徑,父子元件同樣可以使用EventBus,Vuex或者Redux,只是遵循框架開發者的建議,以及適應開發的比較好的實踐而已。