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

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

文章目录

  • vue和react两家对比之--组件之间的通信
    • Vue 组件通信
      • vue 中子组件获取父组件的属性
      • vue中父组件获取子组件的属性
    • React 组件通信
      • react 中子组件获取父组件的属性
      • 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} />;
  }
}

当 ref 被传递给 render 中的元素时,对该节点的引用可以在 ref 的 current 属性中被访问。
const node = this.myRef.current 通过这样我们可以访问这个组件上的属性,和操作这个组件。

你可能感兴趣的:(#,Vue,#,React学习笔记)