zoukankan      html  css  js  c++  java
  • React和Vue组件间数据传递demo

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

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

    
    <p><a href="https://codesandbox.io/s/nwvrx02pxj" rel="nofollow noreferrer">在CodeSandbox中打开</a></p>
    <h3>(三)兄弟组件传递参数</h3>
    ```/* Parent */
    &lt;template&gt;
      &lt;div id="app"&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
  • 相关阅读:
    Ubuntu adb devices :???????????? no permissions (verify udev rules) 解决方法
    ubuntu 关闭显示器的命令
    ubuntu android studio kvm
    ubuntu 14.04版本更改文件夹背景色为草绿色
    ubuntu 创建桌面快捷方式
    Ubuntu 如何更改用户密码
    ubuntu 14.04 返回到经典桌面方法
    ubuntu 信使(iptux) 创建桌面快捷方式
    Eclipse failed to get the required ADT version number from the sdk
    Eclipse '<>' operator is not allowed for source level below 1.7
  • 原文地址:https://www.cnblogs.com/datiangou/p/10126846.html
Copyright © 2011-2022 走看看