vue和react关于父子组件传值的区别

vue

父组件向子组件传值：props传值

// 父组件
import son from './son.vue';
export default {
    component: { son },
    data() {
        return {
             msg: '这是消息'
        }
    }
}
<template>
    <div>父组件</div>
    <son :title="msg"></son>  // 子组件  title是传递给子组件的属性名，msg是传递给子组件的值
</template>    
// 子组件
<template>
     <div>{{title}}</div>
</template>
<script>
     export default {
           props: ['title'],   // props数组中的元素是从父组件传过来的属性名，跟data中定义的属性名一样的使用方法
           data() {return {}},
           methods: {}
     }
</script>

子组件向父组件传值：方法

// 父组件
<template>
     <div>父组件</div>
     <son @changeData="changeFn" :title="msg"></son>　　// @后跟的为子组件调用父组件的方法名changeData, changeFn为父组件中定义的方法
</template>
<script>
     import son from './son.vue';
     export default {
          components: { son },
          data () {
                return { msg: '消息' }
          },
          methods: {
                 changeFn (arg) {
                       this.msg = arg;
                 }
          }
     }
</script>


// 子组件
<template>
     <div>子组件</div>
     <div>{{title}}</div>
     <div @click="postToFather">点击发送值给父组件</div>
</template>
<script>
    export default {
        props: ['title'],
        data() {
              return {
                    toFatherInfo: '传给父组件的信息'
              }
        },
        methods: {
             postToFather () {
                   this.$emit('changeData', toFatherInfo)
             }
        }
    }
</script>

父组件获取子组件的数据： ref（不需要通过事件）

// 父组件
<template>
    <son ref="sonComponent"></son>
</template>
this.$refs.sonComponent.msg  //获取属性值 msg为属性名
this.$refs.sonComponent.fn     // 获取方法 fn为方法名
// 子组件
<script>
    export default {
        name: 'sonComponent',
        data() {
    　　　　return {
　　　　　　　　msg: '子组件的值'
　　　　　　 }
　　　　　} ,
　　　　　methods:{
　　　　　　fn() {
　　　　　　　　console.log("调用了子组件方法")
　　　　　　}
　　　　　}
    }
</script>

子组件获取父组件的数据和方法： parent（不需要事件）

react

子组件获取父组件的属性和方法

this.props.name   // 获取属性值
this.props.fn         // 调用父组件方法

context 在组件树间进行数据传递：设计目的是为了共享那些对于一个组件树而言是“全局”的数据

* 避免通过中间元素传递props

官方提示：context主要应用场景在于很多不同层级的组件需要访问同样一些的数据。谨慎使用，因为这会使得组件的复用性变差。

// context.js  创建一个context对象
import React from 'react'
let {Provider, Consumer} = React.createContext();
export {Provider, Consumer}

// 父组件 将父组件的返回值使用Provider包裹，并传入value属性
import React, { Component } from 'react';
import {Provider} from './context'

class App extends Component {
    state = {
        users: [],
        count: 0,
        id: 3
    }
    // 点赞功能
    increment = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
　　　　　// 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。Provider 接收一个 value 属性，传递给消费组件。 
　　　　　// Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。
        <Provider value={{increment: this.increment}}>  /*  ****  */
            <div className="container">
                <div className="panel panel-danger">
                    <div className="panel-heading">
                        评论
                    </div>
                    <div className="panel-body">
                        <List users={this.state.users} showComment={true} removeById={this.removeById} addComment={this.addComment}></List>
                    </div>
                    <div className="panel-bottom">
                    
                    <br/>
                    <Comment addComment={this.addComment}></Comment>
                    获得的赞数量{this.state.count}
                    </div>
                </div>
            </div>
        </Provider>   /*  ****  */

 ); } } export default App;

// 子组件
import React, { Component } from 'react'
import {Consumer} from '../context'
...
export default class ListItem extends Component {
    ...
  render() {
    let {id, avatar, content, username} = this.props;
    return (
        <Consumer>    /* *** */
            {(value)=>{
                return <div className="media">
                    <div className="media-right">
                        ...
                        <button className="btn btn-primary" onClick={()=>{
                            value.increment()
                        }}>赞</button>
                        ...
                      </div>
                </div>
            }}
            
        </Consumer>  /* *** */
       
    )
  }
}

先这样，待理解补充

vue和react关于父子组件传值的区别

猜你喜欢