在現代的三大框架中,其中兩個Vue和React框架,組件間傳值方式有哪些?
組件間的傳值方式
組件的傳值場景無外乎以下幾種:
父子之間
Vue
Vue是基于單項數據流設計的框架,但是提供了一些的語法,指令去實現一些操作
同時,還有一些其他進行父子組件通信的方式,通過$parent和$children獲取組件的父或者子組件的實例,之后通過實例對象去修改組件的屬性。在表單控件中,使用v-model實現了雙向數據綁定,其實這里v-model是一個語法糖,內部實現還是監聽了表單控件的change事件,然后將數據傳遞給組件修改數據,從而實現了雙向數據綁定。
React
兄弟之間
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 themeconst 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 contextsfunction Content() { return ( <ThemeContext.Consumer> {theme => ( <ProfilePage theme={theme} /> )} </ThemeContext.Consumer> );}
任意組件之間
Vue
對于任意組件,簡單的可以使用EventBus,對于更為復雜的建議使用Vuex。
React
簡單的使用EventBus,復雜的使用Redux
總結
當然,組件間的傳值是靈活的,可以有多種途徑,父子組件同樣可以使用EventBus,Vuex或者Redux,只是遵循框架開發者的建議,以及適應開發的比較好的實踐而已。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答