vue和react两家对比之--组件之间的通信

最新推荐文章于 2024-07-27 00:10:42 发布

家里有蜘蛛

最新推荐文章于 2024-07-27 00:10:42 发布

阅读量1.5k

点赞数 4

分类专栏： # Vue # React学习笔记

本文链接：https://blog.csdn.net/qq_44983621/article/details/105920538

版权

React学习笔记同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Vue

8 篇文章 1 订阅

订阅专栏

vue和react两家对比之–组件之间的通信

文章目录

vue和react两家对比之--组件之间的通信

Vue 组件通信

vue 中子组件获取父组件的属性

需要在组件标签中加入自定义属性，然后再子组件中使用props接收这个传过来的数据
如果传过来的是一个父组件的方法则需要类似于上面的方法使用@func=“func” 但是这个不需要使用props接收，子组件的方法中调用父组件的方法三，使用$emit() 第一个参数是名称第一个是传入的参数数据，通过这种方法也可以把子组件中的数据传入父组件中，有点类似于这个回调函数思想。

<body>
    <div id="app">
        <child-component v-bind:parentmsg="msg"></child-component>
        <com2 @parent-click="parentClick"></com2>
        
    </div>
    <template id="children">
        <div>
            <h1>子组件{{childMsg}} ---- {{ parentmsg }}</h1>
        </div>
    </template>
    <template id="com2">
           <input @click="childClick" type="button" value="123456">
    </template>
    <script>
        var com2 = {
            template:"#com2",
            methods:{
                childClick() {
                //调用父组件传过来的方法
                    this.$emit('parent-click','123')
                }
            }
        }
        var vm = new Vue({
            el: '#app',
            data: {
                msg:'父组件的内容'
            },
            methods: {
                parentClick(data) {
                    console.log('123'+ data)
                }
            },
            components: {
                childComponent: {
                    template:"#children",
                    data() {
                        return {
                            childMsg:'123'
                        }
                    },
                    //接受这个父组件的属性
                    props:['parentmsg']
                    
                },
                //简写了 com2:com2
                com2
            }
        })
    </script>

</body>

vue中父组件获取子组件的属性

通过ref属性，标签中的ref属性本来是作为获取这dom节点，如果是对组件使用这个属性，则可以获取到这个组件对象，则就能获取这个组件上的属性。

body>
    <div id="app">
        <com1 ref="myInput" ></com1>
        <input type="button" @click="handleClick" value="点击">

    </div>
<template id="temp">
    <div>
        <input type="text">
    </div>
</template>
    <script>
        var com1 = {
            template:'#temp',
            data(){
                return {
                    inputMsg:'123'
                }
            },
            methods: {
                show() {
                    console.log('123456')
                }
            }

        }
        var vm = new Vue({
            el: '#app', 
            data: {
                msg:''
            },
            methods:{
                handleClick() {
                //在父组件中调用
                    console.log(this.$refs.myInput)
                }
            },

            components: {
                com1
            }
        })
    </script>

React 组件通信

react 中子组件获取父组件的属性

react中使用props是在组件中通信，也是使用再组件上定义属性向子组件传递信息例如：

render()
{
    //Add中添加两个属性 一个count 一个addTodo 到 props中
    const {todos} = this.state
    return (
        <div>
            <h1>Simple TODO LIST</h1> 
            {//有两个子组件分别是Add和List Add中传入count 和 addTodo方法   List中传入todos }
            <Add count = {todos.length} addTodo ={this.addTodo}/>
            <List todos = {todos}/>
        </div>
    )
}

Add组件通过this.props.count 和this.props.addTodo()调用。

class Add extends React.Component{
    constructor(props){
        super(props)
        this.add = this.add.bind(this) 
    }
    add(){
        const todo = this.todoInput.value.trim()
        //内容为空直接返回
        if(!todo){
            return 
        }
        this.props.addTodo(todo)
        //清空文本框中的内容
        this.todoInput.value = ""
    }
    render()
    {
        //  count = todos.length
        // count 是从上面的父组件传过来的 
        //ref 获取标签
        return (
            <div>
                <input type="text" ref = {input => this.todoInput=input}/>
                <button onClick = {this.add}>add #{this.props.count+1}</button>
            </div>
        )
    }
}
//校验
Add.propTypes = {
    count :PropTypes.number.isRequired,
    addTodo: PropTypes.func.isRequired
}

List组件在此处省略。。。。。
可以详细参考这篇文章点击进入

react中父组件调用子组件的属性

这个同样也是使用ref属性同样这个属性也是可以获取dom节点的，跟vue类似使用再组件上时可以获取到这个组件对象，但是这个作用在组件上时需要再 Refs

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}