React与Vue3.0 父子间值得传递 子组将向父组件传值

父子间传递 是前端人员必须熟练掌握得一点

React

//父组件代码片段
<View>
<OverlayExample
          status={contactInfo.editState}
          getMsg={value => {   //创建一个函数 通过这个函数接收一个
            alert(value);
            this.setState({
              contactInfo: {editState: value},
            });
          }}
        />
</View> 

//子组件代码   
const OverlayExample = props => {
  const toggleOverlay = () => {
    const status = false;
    props.getMsg(status); //props拿到该方法，将传给父组件得值通过参数传递
  };
  const {status} = props;
  return (
    <View>
      <Overlay isVisible={status} onBackdropPress={toggleOverlay}>
        <Text>Hello from Overlay!</Text>
        <View></View>
      </Overlay>
    </View>
  );
};    

Vue 与React类似也需要创建一个函数通过参数拿到回传得值

<check-time @sendTime = "getBeginTime"></check-time>

//省略代码
setup(){
const getBeginTime(value)=>{
	console.log(value)
	}
}

//子组件
	
<template>
<div></div>
</template>
export default{
emits:['sendTime'] //vue3.0需要先注册一下
	setup(props,context){
		const onConfirm=(value)=>{
		context.emit("sendTime",value) //传入参数
		}
	}
}

如果不理解的话 可以在下方留言