Vue和React組件怎么實(shí)現(xiàn)傳值-創(chuàng)新互聯(lián)

本篇文章為大家展示了Vue和React組件怎么實(shí)現(xiàn)傳值，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

公司專(zhuān)注于為企業(yè)提供網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號(hào)開(kāi)發(fā)、商城建設(shè)，小程序制作，軟件按需設(shè)計(jì)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。憑借多年豐富的經(jīng)驗(yàn)，我們會(huì)仔細(xì)了解各客戶(hù)的需求而做出多方面的分析、設(shè)計(jì)、整合，為客戶(hù)設(shè)計(jì)出具風(fēng)格及創(chuàng)意性的商業(yè)解決方案，創(chuàng)新互聯(lián)更提供一系列網(wǎng)站制作和網(wǎng)站推廣的服務(wù)。

組件間的傳值方式

組件的傳值場(chǎng)景無(wú)外乎以下幾種：

  • 父子之間

  • 兄弟之間

  • 多層級(jí)之間（孫子祖父或者更多）

  • 任意組件之間

父子之間

Vue

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

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

  • 子->父：通過(guò)emit向父組件傳值

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

React

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

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

兄弟之間

Vue

在Vue中，可以通過(guò)查找父組件下的子組件實(shí)例，然后進(jìn)行組件進(jìn)行通信。如this.$parent.$children，在$children中，可以通過(guò)組件的name找到要通信的組件，進(jìn)而進(jìn)行通信。

React

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

多層級(jí)組件

Vue

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

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

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

React

在React中，提供了一個(gè)和Vue類(lèi)似的處理多層級(jí)組件通信的方式——context，這里會(huì)提供一個(gè)生產(chǎn)者和一個(gè)消費(fèi)者，會(huì)在父組件中生產(chǎn)數(shù)據(jù)，在子組件中消費(fèi)數(shù)據(jù)。從使用上來(lái)說(shuō)，只需要將子組件包裹在生產(chǎn)者的Provider中，在需要用到數(shù)據(jù)的子組件中，通過(guò)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

對(duì)于任意組件，簡(jiǎn)單的可以使用EventBus，對(duì)于更為復(fù)雜的建議使用Vuex。

React

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

上述內(nèi)容就是Vue和React組件怎么實(shí)現(xiàn)傳值，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道。

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線(xiàn)，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專(zhuān)為企業(yè)上云打造定制，能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。

分享題目：Vue和React組件怎么實(shí)現(xiàn)傳值-創(chuàng)新互聯(lián)
標(biāo)題URL：http://bm7419.com/article24/ijhce.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、做網(wǎng)站、品牌網(wǎng)站制作、網(wǎng)站收錄、商城網(wǎng)站、微信小程序

廣告

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

成都app開(kāi)發(fā)公司