password
查看人数
type
status
date
slug
summary
category
icon
tags
作者
状态
VUE3 实现子组件修改父组件值，通常涉及到父子组件之间的数据传递和通信。在 Vue 3 中，我们可以使用 props 和自定义事件来实现这一功能。
首先，父组件通过 props 将数据传递给子组件。子组件接收到这些数据后，可以在其内部进行修改。然而，需要注意的是，直接修改 props 中的数据是不被推荐的，因为这违反了 Vue 的单向数据流原则。相反，子组件应该通过触发自定义事件来通知父组件数据的变化，然后由父组件来更新数据。
下面是一个简单的示例来说明这个过程：
父组件
子组件
首先，
父组件代码中，我们定义了一个
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属性强制重新渲染可能会降低性能，因此应谨慎使用。
有关使用上的问题，欢迎您在底部评论区留言，一起交流~
- 作者:躁静有徒
- 链接:https://blog.zaojingyoutu.top//article/abf3c372-4fc1-43cc-b02e-71f247d1ded3
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章