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

REACT_VUE

0x00 写在前面

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

0x01 Vue

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

1.父组件向子组件通信

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

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>

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}
2.父组件向子组件通信

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

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>

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。

1.父组件向子组件通信

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

父组件 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值。

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.子组件向父组件通信

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

父组件 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方法。
);
})

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