首先，我应该说我对Vue.js 2相当陌生，但到目前为止我很喜欢它。我用的是最新版本。
我已经开始构建我的第一个更大的应用程序，但很快就陷入了一个情况，我有一个主app组件和两个不同的兄弟组件在应用程序组件中。
<template>
<div>
<comp1></comp1>
<comp2></comp2>
</div>
</template>
<script>
import Comp1 from './Comp1'
import Comp2 from './Comp2'
export default
{
components:
{
Comp1,
Comp2
},
data: function()
{
return {
}
}
}
</script>下面是Comp1的样子：
<template>
<div>
<ul>
<li @click="doClick(data)">Component 1</li>
</ul>
</div>
</template>
<script>
export default
{
data: function()
{
return {
data: 123
}
}
}
</script>下面是Comp2：
<template>
<div>
<ul>
<li>Component 2: { newData }</li>
</ul>
</div>
</template>
<script>
export default
{
data: function()
{
return {
newData: null
}
},
methods:
{
doClick(data)
{
this.newData = data;
}
}
}
</script>我想做的是，在Comp1上触发doClick事件，并在Comp2上处理它。
什么是最有效的和最佳的实践来达到预期的结果？我需要Vuex还是只需要以某种方式发出事件？
1条答案
按热度按时间svmlkihl1#
我认为，与其使
Comp1和Comp2之间的内容复杂化，不如只在保存Comp1和Comp2的父组件中维护数据。我将这个组件命名为ParentComponent。这样你就能真实的真相藏在一个地方。
Comp1不需要保存内存，而是通过props引用ParentComponent给出的数据，Comp2不需要保存Comp1保存的数据，而是使用props。虽然差异很小，但如果你坚持使用它，它将产生很大的差异。现在，您需要使用emit来宣布在Comp1或Comp2中发生了一些交互。这种模式通常被称为Smart and Dumb组件或者有人说“Smart and View”组件。基本上，“智能”组件管理所有的数据和交互，而“视图”组件只是向智能组件报告。现在这样做的好处是可以重用“View or Dumb”组件。
毕竟，如果你保存在
Comp1中，你也必须保存在ParentComponent中，然后把它交给Comp2。这意味着您找到了3个数据，而不是之前的数据，在ParentComponent中有1个数据被Comp1和Comp2引用。现在，当其他人提到Vuex时，我认为这真的是一个矫枉过正的想法。我确实很喜欢React中的
Context特性，并且一直在Vue中等待它。它就像一个更小的Redux或Vuex，事实证明，这就是你所需要的。现在AFAIK Vue 2没有这个功能。也许有一个类似的包可以帮助你。但我不会说太多，只是谷歌一下。请随意分享你发现的想法。我在过去的两年里一直在使用React，所以我没有更新我的知识。
保持代码简单是最好的做法。