国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

React和Vue組件間數(shù)據(jù)傳遞demo

bladefury / 1157人閱讀

摘要：一一父組件向子組件傳數(shù)據(jù)簡單的向下傳遞參數(shù)來自父元素的問候在中打開向更下一級(jí)傳遞參數(shù)在中打開二子組件向父組件傳遞參數(shù)在中打開三兄弟組件傳遞參數(shù)二一父組件向子組件傳數(shù)據(jù)簡單的向下傳遞參數(shù)在中打開向更下一級(jí)傳遞參數(shù)在中打開二子組件向父組件傳遞參

一、React (一)父組件向子組件傳數(shù)據(jù)

簡單的向下傳遞參數(shù)

/* Parent */
class App extends Component {
  render() {
    return (
      

        
      

    );
  }
}

/* Child */
class Child extends Component {
  render() {
    return 
{this.props.msg}
;
  }
}

在CodeSandbox中打開

向更下一級(jí)傳遞參數(shù)

/* Child1 */
class Child1 extends Component {
  render() {
    return (
      

        
Child1

        
{this.props.msg}

        
      

    );
  }
}

/* Child1_Child1 */
class Child1_Child1 extends Component {
  render() {
    return (
      

        
Child1_Child1

        
{this.props.msg}

      

    );
  }
}

在CodeSandbox中打開

(二)子組件向父組件傳遞參數(shù) 
/* Parent */
class App extends Component {
  constructor() {
    super();
    this.state = {
      msg: "this is parent msg"
    };
  }

  changeMsg(msg) {
    this.setState({ msg });
  }

  render() {
    return (
      

        
parent

        
{this.state.msg}

         {
            this.changeMsg(msg);
          }}
          msg={this.state.msg}
        />
      

    );
  }
}

/* Child1 */
class Child1 extends Component {
  componentDidMount() {
    setTimeout(() => {
      this.props.changeMsg("This child change msg");
    }, 1000);
  }

  render() {
    return (
      

        
Child1

        
{this.props.msg}

      

    );
  }
}

在CodeSandbox中打開

(三)兄弟組件傳遞參數(shù) 
/* Parent */
class App extends Component {
  constructor() {
    super();
    this.state = {
      msg: "this is parent msg"
    };
  }

  changeMsg(msg) {
    this.setState({ msg });
  }

  render() {
    return (
      

        
parent

        
{this.state.msg}

         {
            this.changeMsg(msg);
          }}
          msg={this.state.msg}
        />
        
      

    );
  }
}

/* Child1 */
class Child1 extends Component {
  componentDidMount() {
    setTimeout(() => {
      this.props.changeMsg("This child change msg");
    }, 1000);
  }

  render() {
    return (
      

        
Child1

        
{this.props.msg}

      

    );
  }
}

/* Child2 */
class Child2 extends Component {
  render() {
    return (
      

        
Child2

        
{this.props.msg}

      

    );
  }
}
二、Vue (一)父組件向子組件傳數(shù)據(jù)

簡單的向下傳遞參數(shù)

/* Parent */


  



/* Child1 */

在CodeSandbox中打開

向更下一級(jí)傳遞參數(shù)

/* Child1 */



/* Child1Child1 */

在CodeSandbox中打開

(二)子組件向父組件傳遞參數(shù) 
/* Parent */



/* Child2 */

在CodeSandbox中打開

(三)兄弟組件傳遞參數(shù) 
/* Parent */



/* Child2 */


/* Child1 */

export default {
  name: "HelloWorld",
  props: {
    fromChild2: String
  }
  // some code
};

在CodeSandbox中打開

在github上編輯此頁

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98661.html

相關(guān)文章

  • Vue 組件間通信方式

    摘要：本身提供哪幾種通信方式首先靈感源于，支持雙向綁定，本質(zhì)還是單向數(shù)據(jù)流。跟一樣，組件間最基本的數(shù)據(jù)流是通過向子組件傳遞數(shù)據(jù)。但是在卻很少使用，因?yàn)榻M件可以自定義事件，即后面的組件間通信方式其實(shí)就是訂閱發(fā)布模式。 例子是在 jsrun.net 平臺(tái)編寫，不支持移動(dòng)端平臺(tái)，所以本文建議在 PC 端進(jìn)行閱讀。 Vue 是數(shù)據(jù)驅(qū)動(dòng)的視圖框架，那么組件間的數(shù)據(jù)通信是必然的事情，那么組件間如何進(jìn)行數(shù)...

    hss01248 評(píng)論0 收藏0

  • Reactjs vs. Vuejs

    摘要：上圖是二月份前端框架排名，位居第一，排名第三。我們認(rèn)為前端模板和組件代碼是緊密相連的。直到最近看了文檔，才發(fā)現(xiàn)另有蹊蹺。 歡迎大家關(guān)注騰訊云技術(shù)社區(qū)-segmentfault官方主頁，我們將持續(xù)在博客園為大家推薦技術(shù)精品文章哦~ 紀(jì)俊，從事Web前端開發(fā)工作，2016年加入騰訊OMG廣告平臺(tái)產(chǎn)品部，喜歡研究前端技術(shù)框架。 這里要討論的話題，不是前端框架哪家強(qiáng)，因?yàn)樵?Vue 官網(wǎng)就已經(jīng)...

    AaronYuan 評(píng)論0 收藏0

  • VUE組件間的數(shù)據(jù)傳遞

    摘要：是雖說吸取了的的思想，但是它是單向數(shù)據(jù)流的，也就是說子組件無法直接改變父組件狀態(tài)。父組件向子組件傳遞數(shù)據(jù)該方式的數(shù)據(jù)傳遞是遵循單向數(shù)據(jù)流的規(guī)則的，因此使用起來十分的自然。 眾所周知，Vue 是基于組件來構(gòu)建 web 應(yīng)用的。組件將模塊和組合發(fā)揮到了極致。Vue 是雖說吸取了 AngularJs 的 MVVM的思想，但是它是單向數(shù)據(jù)流的，也就是說子組件無法直接改變父組件狀態(tài)。下面總結(jié)出常...

    Half 評(píng)論0 收藏0

  • 手挽手帶你學(xué)React：二檔 React生命周期以及組件開發(fā)

    摘要：手挽手帶你學(xué)入門二檔組件開發(fā)的開始，合理運(yùn)用生命周期和組件，能夠讓你的開發(fā)變地流利又這篇文章帶你學(xué)會(huì)創(chuàng)建組件，運(yùn)用組建。 手挽手帶你學(xué)React入門二檔,組件開發(fā)的開始，合理運(yùn)用生命周期和組件，能夠讓你的開發(fā)變地流利又happy,這篇文章帶你學(xué)會(huì)創(chuàng)建組件，運(yùn)用組建。學(xué)起來吧！ React 組件生命周期 學(xué)習(xí)React，生命周期很重要，我們了解完生命周期的各個(gè)組件，對(duì)寫高性能組件會(huì)有很大...

    izhuhaodev 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<