通过Vue 3的Composition API实现展示、修改父组件值

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属性强制重新渲染可能会降低性能，因此应谨慎使用。

有关使用上的问题，欢迎您在底部评论区留言，一起交流~

问题解决：

读者评论