React和Vue组件间数据传递demo

• Z时代
• 2024-01-10
• 分类：综合

一、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 >

<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>

<p><a href="https://codesandbox.io/s/nwvrx02pxj" rel="nofollow noreferrer">在CodeSandbox中打开</a></p>
<ol><li>向更下一级传递参数</li></ol>
```/* Child1 */
&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;p&gt;{{ msg }}&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  name: "HelloWorld",
  props: {
    msg: String
  }
  // some code
};
&lt;/script&gt;
/* Child1Child1 */
&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;p&gt;{{ msg }}123123&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
export default {
  name: "Child1Child1",
  props: {
    msg: String
  }
  // some code
};
&lt;/script&gt;

在CodeSandbox中打开

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

```/* Parent */

<template>

<div >

<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>

<p><a href="https://codesandbox.io/s/nwvrx02pxj" rel="nofollow noreferrer">在CodeSandbox中打开</a></p>
<h3>(三)兄弟组件传递参数</h3>
```/* Parent */
&lt;template&gt;
  &lt;div &gt;
    &lt;h3&gt;parent&lt;/h3&gt;
    &lt;Child2 @changParent='dealFromChild2'/&gt;
    &lt;Child1 :fromChild2='fromChild2'&gt;
  &lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
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;
    }
  }
};
&lt;/script&gt;
/* Child2 */
&lt;script&gt;
export default {
  name: "Child2",
  data() {
    return {};
  },
  mounted () {
    setTimeout(() =&gt;{
      this.$emit('changParent', 'come from Child2')
    }, 1000)
  }
};
&lt;/script&gt;
/* Child1 */
&lt;template&gt;
  &lt;div class="hello"&gt;
    &lt;p&gt;{{ fromChild2 }}&lt;/p&gt;
  &lt;/div&gt;
&lt;/template&gt;
export default {
  name: "HelloWorld",
  props: {
    fromChild2: String
  }
  // some code
};

在CodeSandbox中打开

在github上编辑此页

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

以上是 React和Vue组件间数据传递demo 的全部内容， 来源链接： utcz.com/z/382243.html