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

資訊專欄INFORMATION COLUMN

React和Vue組件間數據傳遞demo

bladefury / 1152人閱讀

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

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

簡單的向下傳遞參數

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

        
      

    );
  }
}

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

在CodeSandbox中打開

向更下一級傳遞參數

/* 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中打開

(二)子組件向父組件傳遞參數 
/* 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中打開

(三)兄弟組件傳遞參數 
/* 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 (一)父組件向子組件傳數據

簡單的向下傳遞參數

/* Parent */


  



/* Child1 */

在CodeSandbox中打開

向更下一級傳遞參數

/* Child1 */



/* Child1Child1 */

在CodeSandbox中打開

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



/* Child2 */

在CodeSandbox中打開

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



/* Child2 */


/* Child1 */

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

在CodeSandbox中打開

在github上編輯此頁

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98661.html

相關文章

  • Vue 組件間通信方式

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

    hss01248 評論0 收藏0

  • Reactjs vs. Vuejs

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

    AaronYuan 評論0 收藏0

  • VUE組件間的數據傳遞

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

    Half 評論0 收藏0

  • 手挽手帶你學React：二檔 React生命周期以及組件開發

    摘要：手挽手帶你學入門二檔組件開發的開始，合理運用生命周期和組件，能夠讓你的開發變地流利又這篇文章帶你學會創建組件，運用組建。 手挽手帶你學React入門二檔,組件開發的開始，合理運用生命周期和組件，能夠讓你的開發變地流利又happy,這篇文章帶你學會創建組件，運用組建。學起來吧！ React 組件生命周期 學習React，生命周期很重要，我們了解完生命周期的各個組件，對寫高性能組件會有很大...

    izhuhaodev 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<