React和Vue组件间数据传递demo

bladefury 发布于2019-08-23 12:31 / 1078人阅读

摘要：一一父组件向子组件传数据简单的向下传递参数来自父元素的问候在中打开向更下一级传递参数在中打开二子组件向父组件传递参数在中打开三兄弟组件传递参数二一父组件向子组件传数据简单的向下传递参数在中打开向更下一级传递参数在中打开二子组件向父组件传递参

一、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上编辑此页

云服务器 GPU云服务器 activity间传递数据 linux线程间传递数据 js页面间数据传递 java线程间传递数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98661.html

Vue 组件间通信方式

摘要：本身提供哪几种通信方式首先灵感源于，支持双向绑定，本质还是单向数据流。跟一样，组件间最基本的数据流是通过向子组件传递数据。但是在却很少使用，因为组件可以自定义事件，即后面的组件间通信方式其实就是订阅发布模式。例子是在 jsrun.net 平台编写，不支持移动端平台，所以本文建议在 PC 端进行阅读。 Vue 是数据驱动的视图框架，那么组件间的数据通信是必然的事情，那么组件间如何进行数...

hss01248 2019-08-26 13:54 评论0 收藏0
Reactjs vs. Vuejs

摘要：上图是二月份前端框架排名，位居第一，排名第三。我们认为前端模板和组件代码是紧密相连的。直到最近看了文档，才发现另有蹊跷。欢迎大家关注腾讯云技术社区-segmentfault官方主页，我们将持续在博客园为大家推荐技术精品文章哦~ 纪俊，从事Web前端开发工作，2016年加入腾讯OMG广告平台产品部，喜欢研究前端技术框架。这里要讨论的话题，不是前端框架哪家强，因为在 Vue 官网就已经...

AaronYuan 2019-08-20 16:24 评论0 收藏0
VUE组件间的数据传递

摘要：是虽说吸取了的的思想，但是它是单向数据流的，也就是说子组件无法直接改变父组件状态。父组件向子组件传递数据该方式的数据传递是遵循单向数据流的规则的，因此使用起来十分的自然。众所周知，Vue 是基于组件来构建 web 应用的。组件将模块和组合发挥到了极致。Vue 是虽说吸取了 AngularJs 的 MVVM的思想，但是它是单向数据流的，也就是说子组件无法直接改变父组件状态。下面总结出常...

Half 2019-08-21 17:43 评论0 收藏0
手挽手带你学React：二档 React生命周期以及组件开发

摘要：手挽手带你学入门二档组件开发的开始，合理运用生命周期和组件，能够让你的开发变地流利又这篇文章带你学会创建组件，运用组建。手挽手带你学React入门二档,组件开发的开始，合理运用生命周期和组件，能够让你的开发变地流利又happy,这篇文章带你学会创建组件，运用组建。学起来吧！ React 组件生命周期学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大...

izhuhaodev 2019-08-23 15:11 评论0 收藏0