在現代的三大框架中，其中兩個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 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，只是遵循框架開發者的建議，以及適應開發的比較好的實踐而已。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。