正文 

当前位置： 首页 > java > java教程

react和vue组件间数据传递demo(代码片段)

datiangou datiangou     2023-02-04     671

关键词：

一、React

(一)父组件向子组件传数据

  1. 简单的向下传递参数

/* Parent */
class App extends Component 
  render() 
    return (
      <div className="App">
        <Child msg="来自父元素的问候"/>
      </div>
    );
  


/* Child */
class Child extends Component 
  render() 
    return <div>this.props.msg</div>;

在CodeSandbox中打开

  1. 向更下一级传递参数

/* Child1 */
class Child1 extends Component 
  render() 
    return (
      <div>
        <h3>Child1</h3>
        <p>this.props.msg</p>
        <Child1_Child1 ...this.props />
      </div>
    );
  


/* Child1_Child1 */
class Child1_Child1 extends Component 
  render() 
    return (
      <div>
        <h3>Child1_Child1</h3>
        <p>this.props.msg</p>
      </div>
    );

在CodeSandbox中打开

(二)子组件向父组件传递参数


/* Parent */
class App extends Component 
  constructor() 
    super();
    this.state = 
      msg: "this is parent msg"
    ;
  

  changeMsg(msg) 
    this.setState( msg );
  

  render() 
    return (
      <div className="App">
        <h3>parent</h3>
        <p>this.state.msg</p>
        <Child1
          changeMsg=msg => 
            this.changeMsg(msg);
          
          msg=this.state.msg
        />
      </div>
    );
  


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

  render() 
    return (
      <div>
        <h3>Child1</h3>
        <p>this.props.msg</p>
      </div>
    );

在CodeSandbox中打开

(三)兄弟组件传递参数


/* Parent */
class App extends Component 
  constructor() 
    super();
    this.state = 
      msg: "this is parent msg"
    ;
  

  changeMsg(msg) 
    this.setState( msg );
  

  render() 
    return (
      <div className="App">
        <h3>parent</h3>
        <p>this.state.msg</p>
        <Child1
          changeMsg=msg => 
            this.changeMsg(msg);
          
          msg=this.state.msg
        />
        <Child1
          msg=this.state.msg
        />
      </div>
    );
  


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

  render() 
    return (
      <div>
        <h3>Child1</h3>
        <p>this.props.msg</p>
      </div>
    );
  


/* Child2 */
class Child2 extends Component 
  render() 
    return (
      <div>
        <h3>Child2</h3>
        <p>this.props.msg</p>
      </div>
    );

二、Vue

(一)父组件向子组件传数据

  1. 简单的向下传递参数

```/* Parent */
<div id="app">
<Child msg=‘ni daye‘/>
</div>

/* Child1 */
<template>
<div class="hello">
<p> msg </p>
</div>
</template>
<script>
export default
name: "HelloWorld",
props:
msg: String

// somecomde
;
</script>
```

在CodeSandbox中打开

  1. 向更下一级传递参数

```/* Child1 */
<template>
<div class="hello">
<p> msg </p>
</div>
</template>
<script>
export default
name: "HelloWorld",
props:
msg: String

// some code
;
</script>

/* Child1Child1 */
<template>
<div class="hello">
<p> msg 123123</p>
</div>
</template>
<script>
export default
name: "Child1Child1",
props:
msg: String

// some code
;
</script>
```

在CodeSandbox中打开

(二)子组件向父组件传递参数

```/* Parent */
<template>
<div id="app">
<h3>parent</h3>
<Child2 @changParent=‘dealFromChild2‘/>
</div>
</template>
<script>
import Child2 from "./components/Child2";

export default
name: "App",
components:
Child2
,
data ()
return
fromChild2: ‘‘

,
methods:
dealFromChild2 (val)
this.fromChild2 = val;


;
</script>

/* Child2 */
<script>
export default
name: "Child2",
data()
return ;
,
mounted ()
setTimeout(() =>
this.$emit(‘changParent‘, ‘come from Child2‘)
, 1000)

;
</script>
```

在CodeSandbox中打开

(三)兄弟组件传递参数

```/* Parent */
<template>
<div id="app">
<h3>parent</h3>
<Child2 @changParent=‘dealFromChild2‘/>
<Child1 :fromChild2=‘fromChild2‘>
</div>
</template>
<script>
import Child2 from "./components/Child2";
import Child1 from "./components/Child1";

export default
name: "App",
components:
Child2
,
data ()
return
fromChild2: ‘‘

,
methods:
dealFromChild2 (val)
this.fromChild2 = val;


;
</script>

/* Child2 */
<script>
export default
name: "Child2",
data()
return ;
,
mounted ()
setTimeout(() =>
this.$emit(‘changParent‘, ‘come from Child2‘)
, 1000)

;
</script>

/* Child1 */
<template>
<div class="hello">
<p> fromChild2 </p>
</div>
</template>
export default
name: "HelloWorld",
props:
fromChild2: String

// some code
;
```

在CodeSandbox中打开

在github上编辑此页

来源：https://segmentfault.com/a/1190000016784633

react7.组件间的通讯(代码片段)

【React】7.组件间的通讯1.父组件向子组件传递参数2.子组件向父组件传递参数3.兄弟组件传递参数4.跨组件通讯组件之间经常需要共享数据，传递数据，互相调用方法等操作。这时就需要使用组件间通讯的技术。包括父子... 查看详情

vue3组件传值(代码片段)

1、组件间的数据传递默认情况下，每个组件实例都是独立的，组件间无法直接访问数据因此需要组件间的数据传递，也称为组件间的通讯分类：父组件向子组件的数据传递子组件向父组件的数据传递a、父向子组... 查看详情

vue和react区别(代码片段)

...：  1.都支持服务器端渲染  2.都有VirtualDOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范  3.数据驱动视图  4.都有支持 查看详情

vue非父子组件通信方案(代码片段)

Vue非父子组件通信方案概述在Vue中模块间的通信很普遍如果是单纯的父子组件间传递信息，父组件可以使用props将数据向下传递到子组件，而在子组件中可以使用events（父组件需要先监听对应子组件触发的事件）向父组件传递信... 查看详情

笔记react学习与记录(代码片段)

...和事件绑定计数器增减和循环案例写法注意面向对象拆分组件与组件间传值父组件向子组件传递数据子组件向父组件传递数据代码代码优化围绕react衍生出的思考react高级内容安装react开发调试工具PropTypes与DefaultPropsprops，state... 查看详情

react的单向数据流与组件间的沟通(代码片段)

今天来给大家总结下React的单向数据流与组件间的沟通。首先，我认为使用React的最大好处在于：功能组件化，遵守前端可维护的原则。先介绍单向数据流吧。 React单向数据流：　　React是单向数据流，数据主要从父节点传递... 查看详情

关于组件间传递ref对象的思考(代码片段)

关于对象分配给ref并在组件间传递的思考引发思考的案例：App.vue组件内存在下面info数据。要将其传递给子组件Home.vue。并且在Home中会对传递过去的值做操作。constinfo=ref(name:"fzb",age:21)直接传递，虽然可以修改... 查看详情

前端：redux进阶之褪去react-redux的外衣(代码片段)

...react中，props和state都可以设置数据。不同的是，props借助组件属性传递数据但不可以渲染组件，它相对来说是“静态的”；state可以监听事件来修改数据并重新渲染组件，它相对来说是“动态的”。要想实现组件间传... 查看详情

react中组件间通信的几种方式(代码片段)

在使用React的过程中，不可避免的需要组件间进行消息传递（通信），组件间通信大体有下面几种情况：父组件向子组件通信子组件向父组件通信非嵌套组件间通信跨级组件之间通信1.父组件向子组件通信父组件通过向子组件传... 查看详情

从vue的视角学react——组件传参(代码片段)

组件化开发的时候，参数传递是非常关键的环节哪些参数放在组件内部管理，哪些参数由父组件传入，哪些状态需要反馈给父组件，都需要在设计组件的时候想清楚但实现这些交互的基础，是明白组件之间参数传递的方式，和各... 查看详情

十vue：vuex实现data()内数据多个组件间共享(代码片段)

...g/zh/installation.html1.1vuex有什么用Vuex：实现data()内数据多个组件间共享一种解决方案（类似react的redux）1.2什么情况下使用vuex虽然Vuex可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。... 查看详情

vue组件间的通信方式(代码片段)

一、组件间通信的概念组件是vue最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互进行直接的引用，所以组件间的相互通信是非常重要的。通信指的是发送者通过某种媒... 查看详情

react-组件间的传值(代码片段)

父组件向子组件传值父组件通过属性进行传递，子组件通过props获取//父组件classCommentListextendsComponentrender()return(<div><Commentcomment=information/></div>)//子组件classCommentextendsComponentrender()return(<div><p>this.props.comment&l... 查看详情

vue父组件和子组件数据传递(代码片段)

1、父组件向子组件传递数据父组件：<template><divclass="parent"><p>父组件：msg</p><Childmessage="Hello,Iamparent!"></Child></div></template 查看详情

vue父组件和子组件数据传递(代码片段)

1、父组件向子组件传递数据父组件：<template><divclass="parent"><p>父组件：msg</p><Childmessage="Hello,Iamparent!"></Child></div></template 查看详情

react讲解（组件，生命周期以及受控组件）(代码片段)

文章目录前言一、组件的通信原理state和setState二、组件分类1.类组件2.组件中父子组件的通信代码示例A组件代码B组件代码：2.跨组件通信A组件代码如下：C组件代码如下:三.组件的生命周期生命周期演变现在挂载阶段**更... 查看详情

vue组件间通信(代码片段)

prop、event、ref通过Prop向子组件传递数据Prop是你可以在组件上注册的一些自定义特性。当一个值传递给一个prop特性的时候，它就变成了那个组件实例的一个属性。为了给博文组件传递一个标题，我们可以用一个props选项将其包含... 查看详情

vue组件间进行通信(代码片段)

一、父组件与子组件通信父组件与子组件通信段桥梁是子组建的props属性，通过属性绑定的方式，将父组件的数据传到子组件的props中，子组件在内部使用这些数据。HTML部分<divid="app"><!--父组件将fruit传递给f--><... 查看详情