从子组件设置父状态

// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [parentState, setParentState] = useState('初始状态');

  return (
    <div>
      <p>父组件状态：{parentState}</p>
      <ChildComponent updateParentState={setParentState} />
    </div>
  );
}

export default ParentComponent;

// 子组件
import React from 'react';

function ChildComponent({ updateParentState }) {
  const handleChange = (event) => {
    updateParentState(event.target.value);
  };

  return (
    <div>
      <input type="text" onChange={handleChange} placeholder="输入新状态" />
    </div>
  );
}

export default ChildComponent;

<!-- 父组件 -->
<template>
  <div>
    <p>父组件状态：{{ parentState }}</p>
    <ChildComponent @update-state="updateState" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentState: '初始状态'
    };
  },
  methods: {
    updateState(newState) {
      this.parentState = newState;
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <input type="text" @input="handleChange" placeholder="输入新状态" />
  </div>
</template>

<script>
export default {
  methods: {
    handleChange(event) {
      this.$emit('update-state', event.target.value);
    }
  }
};
</script>