React和Vue中父子组件间的通信总结

Posted on

REACT_VUE

0x00 写在前面

  React的一个特性是组件化，组件化的目的是为了能够进行复用，减少代码的冗余。在项目中使用复杂组件不可避免得要涉及到父子组件间的通信。
  本文对目前前端比较流行的框架Vue和React中父子组件间通信的方法做一个总结。关于组件的声明与使用本文中不做详细说明。

0x01 Vue

  这里父组件是Father，子组件是Child。

1.1父组件向子组件通信

  将父组件的值作为一个属性，绑定给子组件，在子组件中通过props进行接收。

1.1.1 Father.vue

  在父组件中的子组件标签中使用v-bind指令绑定属性C，传入的”c”是父组件中的一个值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<template>
    <child v-bind:C="c"></child>//这里的"c"是父组件中的一个值。
</template>
<script>
import HomeChild from '@/components/Child'
export default {
  name: 'father',
  components: {
    child
  },
  data () {
    return {
      c:[1,2,3]
    }
  }
}
</script>

1.1.2 Child.vue

  在Child.vue中创建props，用于接收父组件传递的值。C被限定为Array格式。

1
2
3
4
5
6
7
8
<script>
export default {
    name: 'child',
    props: {
        C: Array//这里
    }
}
</script>

  props接收的方式有3种：

  1. props:[‘name’]
  2. props:{name:{type:String}}
  3. props:{name:String}

1.2父组件向子组件通信

  在事件的函数中使用$emit来触发一个自定义事件，并传递一个参数，这个参数就是子组件要传递给父组件的值。

1.2.1 Child.vue

  使用$emit来触发一个名为“ListenChild”的自定义事件，并为这个自定义事件传递一个字符串。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
    <div>
        <button v-on:click="ChildClick">点击向父组件传值</button>
    </div>
</template>
<script>
export default {
    name: 'child',
    methods: {
        ChildClick: function () {
            this.$emit("ListenChild","I am child.vue")
        }
    }
}
</script>

1.2.2 Father.vue

  在父组件中的child标签中监听自定义事件（ListenChild事件），监听子组件是否通过该事件传递了值，并添加一个响应该事件的方法ShowChild。ShowChild中的方法接受一个参数data ，data就是子组件传递过来的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <div>
    <child v-on:ListenChild="ShowChild"></child>//
  </div>
</template>
<script>
import HomeChild from '@/components/Child'
export default {
    name: 'Father',
    components: {
        Child
    },
    
    methods: {
        ShowChild: function (data) {
            this.data = data;
            console.log("data:" + data)
        }
    }
}
</script>

0x02 React

  这里父组件是Father，子组件是Child。

2.1父组件向子组件通信

  父组件可以向子组件通过传 props 的方式，向子组件进行通信。

2.1.1 父组件 Father.js

1
2
3
4
5
6
7
8
9
10
11
12
13
//父组件通过属性向子组件传递参数
    return (
        this.state.list.map((item, index) => {
            return (
              //父组件通过属性向子组件传递参数
              <Father
                key={index}
                content={item}
                index={index} />
            );
        })
    )

  父组件通过属性向子组件传递参数，代码中的key，content，index都是属性，用来传递父组件中的index，item值。

2.1.2 Child.js

1
2
3
4
5
6
7
8
const { content } = this.props;//es6的结构复制
return (
    //通过this.props.content接收父组件传来的参数
    <div onClick={this.handleDelete}>
        {this.props.content}
        
    </div>
)

  子组件中定义content来复制this.props，通过this.props.content接收父组件传来的属性值。

2.2 子组件向父组件通信

  子组件和父组件通信，通过props调用父组件传递过来的方法来进行通信。

2.2.1 父组件 Father.js

  在父组件中定义能够实现删除功能的handleDelete()函数。

1
2
3
4
5
6
7
handleDelete(index)  {
    const list = [...this.state.list];
    list.splice(index, 1);
    this.setState({
      list
    })
}

  父组件使用delete向子组件传递handleDelete方法。

1
2
3
4
5
6
7
8
this.state.list.map((item, index) => {
    return (
      //父组件接收子组件传递过来的方法
      <Father
        delete={this.handleDelete} />//定义delete向子组件传递handleDelete方法。
    );
})

2.2.2 Child.js

  在子组件中定义handleDelete1()方法。定义delete, index来复制this.props。通过delete(index)调用从父组件中传递过来的handleDelete方法，实现删除。

1
2
3
4
5
6
7
childHandleDelete() {
    const { delete, index} = this.props;
    //子组件和父组件通信，子组件要调用父组件传递过来的方法，
    delete(index);
    // this.props.delete(this.props.index);
    // this.props.delete(this.props.index);//将this.props.index传递给父组件中的delete方法。
}

  而要在子组件中固定位置中实现删除功能。就要调用handleDelete1()获取父组件传递过来的方法和index，进行删除。

1
2
3
4
5
6
7
return (
    //通过onClick调用this.childHandleDelete实现删除功能。 
    <div onClick={this.childHandleDelete}>
        {this.props.content}
        
    </div>
)
Miss Me wechat
light