在用户单击 vuejs 时更新发送到子组件的值

Question

我在 mu app.vue 中有两个组件，我会在页面加载时将数据从 app.vue 发送到我的第一个组件（过滤器组件）。

现在，根据第二个组件中显示数据中的用户操作，我需要将新值传递回第一个组件。

我正在使用 a 和 a 。考虑我在第一个组件中收到的道具之一是 "nselectedOption" 我在数据中这样做：{ return { selectedOption: this.nselectedOption }} 以避免突变警告。

现在每次我从第二个组件更新这个组件的值时，我只看到 "nselectedOption" 中的变化，而不是 "selectedOption" 中的变化。你能解释一下这是为什么吗？

我需要将更新后的值放入的 v 模型中。 1. 如果我使用 "nselectedOption" 它正在更新文本框，但在编辑值时会抛出错误。 2. 如果我使用 "selectedOption" 它不会更新文本框本身的值。

我什至尝试将计算值用于 return 值，它有效，但如果我尝试更改过滤器组件中其他选项中的值，则已更新的值显示为 null 或无。

请帮助我。这个问题是否可以使用状态管理概念来解决，或者我是否必须有一个单独的组件而不是 App.Vue 来完成所有这些，以便它可以充当 parent/child 有点东西，或者有其他方法可以克服这个。

Answer 1

尝试使用观察器。如果你观察 nselectedOption，每次它改变时，观察者都会触发并将改变的值绑定到 selectedOption。

props: ['nselectedOption'],
data: {
    selectedOption
},
watch: {
    nselectedOption: function (val) {
        this.selectedOption = val
    }
}

此外，如果您正在观看的道具是 object/array，如果您想制作本地副本以避免变异，请考虑使用扩展运算符。

this.someObj = { ...someProp }

Updating the values sent to child component on user click in vuejs