Vue和React組件通訊的總結

在現代的三大框架中，其中兩個Vue和React框架，組件間傳值方式有哪些？

組件間的傳值方式

組件的傳值場景無外乎如下幾種：

1. 父子之間
2. 兄弟之間
3. 多層級之間（孫子祖父或者更多）
4. 任意組件之間

父子之間

Vue

Vue是基於單項數據流設計的框架，可是提供了一些的語法，指令去實現一些操做

父->子：經過props進行傳遞數據給子組件 子->父：經過emit向父組件傳值

同時，還有一些其餘進行父子組件通訊的方式，經過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 => (
         <ProfilePage  theme={theme} />
      )}
    </ThemeContext.Consumer>
  );
}
複製代碼

任意組件之間

Vue

對於任意組件，簡單的能夠使用EventBus，對於更爲複雜的建議使用Vuex。

React

簡單的使用EventBus，複雜的使用Redux

總結

固然，組件間的傳值是靈活的，能夠有多種途徑，父子組件一樣能夠使用EventBus，Vuex或者Redux，只是遵循框架開發者的建議，以及適應開發的比較好的實踐而已。