在数据更改时更新UI
(我主要使用Vue.js，所以很多示例都会与之相关)
我正在学习构建web应用程序，最耗时的事情是UI组件和它们应该表示的数据之间的同步，即显示给用户的内容和存储在内存(本地)中的内容之间的一致性。
例如，假设我有以下组件树：
<body>
<form/>
<task-bar/>
<component-1>
<component-2>
</body>这里的父组件是body，它有四个子组件，即form、task-bar、component-1和component-2。
我们有一个对象列表，例如：
[
{
id: 1,
title: "X"
},
{
id: 2,
title: "Y"
}
]任务栏列出组件标题。
Component-1通过单选按钮显示在Component-2中选择的对象。
现在，在表单中，我想要向列表中添加一个对象，或者编辑/删除Component-2中选定的组件。
在Vue.js中，我会将列表从父实体传递到它的子组件，但是，默认情况下，父组件和兄弟组件不会对子组件和兄弟组件的数据做出反应。因此，同级对列表的更改会在所有组件之间创建不一致的状态。
我读了两种方法来解决它，首先是使用事件，孩子做一些事情和通知(这是我以前在Java Swing中做的，一个观察者模式)，但是在一些事件之后，这会变得非常麻烦，而且，它很难调试，并且你可能会在不同的组件中重复事件代码。
第二种方式是使用全局状态，例如在Vuex中实现的Flux模式。然而，这将所有组件耦合到特定项目的Vuex，并使其更不便于移植。
我的问题是，这是两种独特的做事方式吗？我是不是做错了？
回答 1
Stack Overflow用户
发布于 2021-05-26 04:26:46
您还可以执行以下操作之一：
- 像使用全局状态一样使用变量。在Vue的文档中有一个这样的例子：https://vuejs.org/v2/guide/state-management.html
- in你的组件，使用$parent.doSomething()，其中doSomething()是你的父组件的一个方法。
但就我个人而言，我喜欢vuex :)
https://stackoverflow.com/questions/67695132
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号