這篇“Vue和React組件如何實現(xiàn)傳值”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue和React組件如何實現(xiàn)傳值”文章吧。

公司主營業(yè)務(wù)：成都網(wǎng)站制作、成都網(wǎng)站設(shè)計、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出寶豐免費做網(wǎng)站回饋大家。

組件間的傳值方式

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

• 父子之間

• 兄弟之間

• 多層級之間（孫子祖父或者更多）

• 任意組件之間

父子之間

Vue

Vue是基于單項數(shù)據(jù)流設(shè)計的框架，但是提供了一些的語法，指令去實現(xiàn)一些操作

• 父->子：通過props進行傳遞數(shù)據(jù)給子組件

• 子->父：通過emit向父組件傳值

同時，還有一些其他進行父子組件通信的方式，通過$parent和$children獲取組件的父或者子組件的實例，之后通過實例對象去修改組件的屬性。在表單控件中，使用v-model實現(xiàn)了雙向數(shù)據(jù)綁定，其實這里v-model是一個語法糖，內(nèi)部實現(xiàn)還是監(jiān)聽了表單控件的change事件，然后將數(shù)據(jù)傳遞給組件修改數(shù)據(jù)，從而實現(xiàn)了雙向數(shù)據(jù)綁定。

React

• 父->子：通過props將數(shù)據(jù)傳遞給子組件

• 子->父：通過父組件向子組件傳遞函數(shù)，然后子組件中調(diào)用這些函數(shù)，利用回調(diào)函數(shù)實現(xiàn)數(shù)據(jù)傳遞

兄弟之間

Vue

在Vue中，可以通過查找父組件下的子組件實例，然后進行組件進行通信。如this.$parent.$children，在$children中，可以通過組件的name找到要通信的組件，進而進行通信。

React

在React中，需要現(xiàn)將數(shù)據(jù)傳遞給父組件，然后父組件再傳遞給兄弟組件。

多層級組件

Vue

在多層級的組件中，當然可以通過不斷的獲取$parent找到需要傳遞的祖先級組件，然后進行通信，但是這樣繁瑣易錯，并不推薦。Vue在2.2.0 新增提供了provide/inject的方式進行傳遞數(shù)據(jù)。即在祖先組件提供數(shù)據(jù)，在需要使用的組件中，注入數(shù)據(jù)，這樣就可以在子組件中使用數(shù)據(jù)了。provide/inject文檔

// 父級組件提供 'foo'
var Provider = {
 provide: {
  foo: 'bar'
 },
 // ...
}

// 子組件注入 'foo'
var Child = {
 inject: ['foo'],
 created () {
  console.log(this.foo) // => "bar"
 }
 // ...
}

React

在React中，提供了一個和Vue類似的處理多層級組件通信的方式——context，這里會提供一個生產(chǎn)者和一個消費者，會在父組件中生產(chǎn)數(shù)據(jù)，在子組件中消費數(shù)據(jù)。從使用上來說，只需要將子組件包裹在生產(chǎn)者的Provider中，在需要用到數(shù)據(jù)的子組件中，通過Consumer包裹，就可以拿到生產(chǎn)者的數(shù)據(jù)。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，對于更為復(fù)雜的建議使用Vuex。

React

簡單的使用EventBus，復(fù)雜的使用Redux

以上就是關(guān)于“Vue和React組件如何實現(xiàn)傳值”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章名稱：Vue和React組件如何實現(xiàn)傳值
網(wǎng)站鏈接：http://www.chinadenli.net/article44/gpceee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導航、響應(yīng)式網(wǎng)站、網(wǎng)站排名、自適應(yīng)網(wǎng)站、網(wǎng)站設(shè)計、小程序開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)