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

Posted 2023-02-23

【中文标题】在 vuejs 中用户单击时更新发送到子组件的值

【英文标题】：Updating the values sent to child component on user click in vuejs

【发布时间】：2019-09-25 21:41:27

【问题描述】：

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

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

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

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

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

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

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

【参考方案1】：

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

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

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

this.someObj =  ...someProp