Vue.js Vuejs父子通信问题，带有单个值

因此，在Vuejs中，我创建了一个下拉组件，名为like So：

                        <Dropdown
                        :style="{width: '100%'}"
                        v-on:selectReturn='selectReturn'
                        :dropDataArray="expenseType"/>

                        <Dropdown
                        :style="{width: '100%'}"
                        v-on:selectReturn='selectReturn'
                        :dropDataArray="loanType"/>

在child中，由于各种原因，我需要读取数组的第一行

所以我

道具：['dropDataArray']

而且

this.dataArrayName=this.dropDataArray[0]

然而：

控制台记录this.dataArrayName值显示它将第一个子组件第0项更改为“loanType”，我在@click上调用它。这是非常奇怪的，因为我没有传递第一个下拉式子元素loanType数组！我认为我正在与vuejs的反应性警告发生冲突，但我不知道如何或最好的方式来改变这一点。如果有人有任何想法，请告诉我。谢谢

这里有一个codesandbox.io链接

如果单击顶部的选择框并查看控制台，您将发现问题。你会看到：

this.dataArrayName的值：loanType

当它真的应该是ExpenseType

进一步的测试表明问题比我预期的更严重

                        <Dropdown
                        :style="{width: '100%'}"
                        :stringProp="'expenseString'"
                        :dropDataArray="expenseType"/>

                        <Dropdown
                        :style="{width: '100%'}"
                        :stringProp="'loanString'"
                        :dropDataArray="expenseType"/>

使用道具：['dropDataArray'，'stringProp']

---

再次只返回loanString

这似乎是window.onclick中的一个范围问题。dataArrayName的实际值不会更改。您的窗口事件可能从上次渲染的下拉组件获取其值

我对您的示例应用程序做了一些更改：

---

我添加的是一个间隔，每隔3秒显示一次dataArrayName以进行日志记录。如您所见，它同时显示expenseType和loanType。我还添加了一个teste方法，并将your window.onclick的内容移动到这个方法中。单击下拉列表时，将运行测试。如果您现在查看console，它会根据您单击的下拉列表实例显示正确的dataArrayName。

您可以包括下拉列表组件的代码，或者在或上重新生成问题的示例吗？数组是通过引用传递的，您可能正在从下拉组件中修改dropDataArray。如果切换下拉顺序，第一项是否为“expenseType”？您是否关闭组件我看不到您是否将其包装在…？我使用/>关闭下拉列表。我在上面的问题中加入了一个代码沙盒来说明这个问题。谢谢啊…我两秒钟前就看到了。我给你所有的分数，愿你在神圣的源代码的荣耀中行走。非常感谢善良的陌生人：D

                        <Dropdown
                        :style="{width: '100%'}"
                        :stringProp="'expenseString'"
                        :dropDataArray="expenseType"/>

                        <Dropdown
                        :style="{width: '100%'}"
                        :stringProp="'loanString'"
                        :dropDataArray="expenseType"/>