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，只是遵循框架開發者的建議，以及適應開發的比較好的實踐而已。