vue.js - 在用户点击 vuejs 时更新发送到子组件的值

Question

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

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

我正在使用 a 和 a 。考虑我在第一个组件中收到的一个道具是“nselectedOption”，我在数据中执行此操作：{ return { selectedOption: this.nselectedOption }} 以避免突变警告。

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

我需要将更新后的值转换为 . 1. 如果我使用“nselectedOption”，它会更新文本框，但在编辑值时会引发错误。2. 如果我使用“selectedOption”，它不会更新文本框本身的值。

我什至尝试使用计算值来返回值，它可以工作，但是如果我尝试更改过滤器组件中其他选项中的值，则已更新的值显示 null 或什么都没有。

请帮我。这个问题是否可以使用状态管理概念来解决，或者我是否必须拥有除 App.Vue 之外的单独组件来完成所有这些工作，以便它充当父/子之类的事情，或者是否有其他方法可以克服这个问题。

score 2 · Accepted Answer

尝试使用观察者。如果您监视 nselectedOption，则每次更改时，监视程序都会触发并将更改的值绑定到 selectedOption。

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

此外，如果您正在观看的道具是一个对象/数组，如果您想制作本地副本以避免突变，请考虑使用扩展运算符。

this.someObj = { ...someProp }

1 回答 1