VUE3 实现子组件修改父组件值，通常涉及到父子组件之间的数据传递和通信。在 Vue 3 中，我们可以使用 props 和自定义事件来实现这一功能。

首先，父组件通过 props 将数据传递给子组件。子组件接收到这些数据后，可以在其内部进行修改。然而，需要注意的是，直接修改 props 中的数据是不被推荐的，因为这违反了 Vue 的单向数据流原则。相反，子组件应该通过触发自定义事件来通知父组件数据的变化，然后由父组件来更新数据。

下面是一个简单的示例来说明这个过程：

父组件

<template>  <div>    <ChildComponent     :data="modelRef.testData"    @update:data=""/>  </div></template><script>import ChildComponent from './ChildComponent.vue';import { reactive,defineComponent} from "vue";export default defineComponent({		components: { ChildComponent },		setup(){			const modelRef = reactive({		testData: []			})		return {      modelRef,    };		}})</script>

子组件

<template>  <textarea  :value="dataResource"  @change="$emit('update:data', $event.target.value)"  >  </textarea></template><script>import { defineComponent,toRefs } from "vue";export default defineComponent( {  props: {    data: Array,  },  emits: ["update:data"],  setup(props) {    const prop = toRefs(props);    const dataResource = prop.data.value    return {      dataResource,    };  },});</script>

首先，

父组件代码中，我们定义了一个ChildComponent组件，并通过:data="modelRef.testData"将testData数组传递给子组件。同时，我们监听了子组件的update:data事件，以便在子组件的数据发生变化时能够更新父组件的testData数组。

在子组件代码中，我们接收了一个名为data的数组类型的属性，并在setup函数中通过toRefs将其转换为响应式引用。然后，我们将data属性的值赋给dataResource变量，并在textarea元素的:value绑定中使用它。同时，我们监听了textarea元素的change事件，并在事件处理函数中通过$emit方法触发update:data事件，将textarea的值作为参数传递给父组件。

父组件和子组件之间的数据传递和事件监听是通过Vue 3的Composition API实现的。这种方式使得组件之间的逻辑更加清晰和可维护。

问题解决：

有时后父组件更新数据后子组件数据更新，但是页面没有渲染，使用key属性： 当key的值改变时，Vue会销毁并重新创建子组件。频繁地通过key属性强制重新渲染可能会降低性能，因此应谨慎使用。