Javascript Vue Js我应该为此使用Vuex吗？

我正在通过小型研讨会学习Vuejs。我有两个组件；PersonCard和ColorPick以及一组数据。我可以为person数据中的每个人创建一张新的person卡，并且在每个person卡中我可以创建一个颜色选择器（单选按钮），但是我很困惑如何将“拾取的颜色”返回到person卡渲染的位置以用作样式绑定？我一直在尝试使用$emit，但它不起作用。欢迎任何建议

我很确定我无法获取并设置UpdatedPlayer.color，因为UpdatedPlayer是一个在模板中迭代的数组，但是我如何针对UpdatedPlayer中的特定“player”来根据$emit更新其颜色

App.vue

    <template>
  <div>
    <PersonCard :players="players"></PersonCard>
  </div>
</template>

<script>

import PersonCard from './components/PersonCard.vue'

  export default {
    components: {
      PersonCard
    },
    data () {
      return {
        players: [
        {
        id: 1,
        name: "Daniel",
        age: 33,
        color:"red"
        },
        {
        id: 2,
        name: "Sam",
        age: 21,
        color: "green"
        }
        ]
      }
    }

  };
</script>

<style scoped>

</style>

从“./components/PersonCard.vue”导入PersonCard
导出默认值{
组成部分：{
个人卡
},
数据（）{
返回{
玩家：[
{
id:1，
姓名：“丹尼尔”，
年龄:33岁，
颜色：“红色”
},
{
id:2，
姓名：“山姆”，
年龄:21岁，
颜色：“绿色”
}
]
}
}
};

PersonCard.vue

<template>
  <div>
      <li  v-for="player in updatedPlayers" :key="player.id">
          <h4 :style="{backgroundColor: player.color}">{{player.name}}</h4>
          <ColorPick @colorChosen="newColor"></ColorPick>
      </li>
  </div>
</template>

<script>

import ColorPick from './ColorPick.vue'

export default {
data () {
    return {
        pickedColor: '',
        updatedPlayers : this.Players
    }
},
props: ['Players'],
components: {
    ColorPick
},
methods: {
    newColor (newColor) {
        this.updatedPlayers.color = newColor;
    }
}

};
</script>

<style scoped>
li {
    list-style: none !important;
}
</style>

{{player.name}

从“./ColorPick.vue”导入ColorPick
导出默认值{
数据（）{
返回{
pickedColor:“”，
更新的玩家：这个。玩家
}
},
道具：[玩家]，
组成部分：{
颜色选择
},
方法：{
新颜色（新颜色）{
this.updatedPlayer.color=newColor；
}
}
};
李{
列表样式：无！重要；
}

ColorPick.vue

<template>
  <div>
    <form action>
      <input type="radio" name="nameColor" value="yellow" v-model="pickedColor" @change="colorChosen" /> Yellow
      <br />
      <input type="radio" name="nameColor" value="red" v-model="pickedColor" @change="colorChosen" /> Red
      <br />
      <input type="radio" name="nameColor" value="blue" v-model="pickedColor" @change="colorChosen" /> Blue
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pickedColor: "",
    };
  },
  methods: {
      colorChosen(pickedColor) {
         this.$emit ('newColor', pickedColor);
      }
  }
};
</script>

<style>
</style>

黄色的


红色


蓝色
导出默认值{
数据（）{
返回{
pickedColor:“”，
};
},
方法：{
所选颜色（pickedColor）{
此.$emit（'newColor'，pickedColor）；
}
}
};

我注意到您的事件侦听器是@colorSelected（在PersonCard.vue中），但您正在发出“newColor”，请将其更改为@newColor（在PersonCard.vue中）。看看这是否有帮助

---

是的，Vuex可以轻松地将状态信息从一个组件传递到另一个组件。随着应用程序的增长和扩展，跟踪所有发射可能会变得有点棘手。

老实说，如果层次结构中有两个组件，那么就不需要Vuex了。您只需要考虑您的组件以及它们如何交互

如果一个

PlayerCard

组件有一个子

ColorPicker

组件，那么

ColorPicker

组件应该发出一个带有拾取颜色的事件，这是正确的。

PlayerCard

组件可以监听该事件并设置它需要的任何绑定：

导出默认值{
组成部分：{
采色器
},
数据（）{
返回{
背景颜色：'#000'//默认值
};
},
方法：{
updateBackgroundColor（事件）{
this.backgroundColor=event.target.value；
}
}
}

---

导出默认值{
方法：{
onInput（事件）{
此.$emit（'input'，event）；
}
},
道具：{
价值：{
要求：正确，
类型：字符串
}
}
}

这里我们有两个部分。当

ColorPicker

中的输入更改其值时，它将

input

事件传递到

PlayerCard

组件，然后该组件设置背景颜色作为响应

ColorPicker

组件也保持“哑”，因为它不知道它所使用的组件的任何信息，只允许用户选择颜色。父组件侦听

输入

事件，并做出响应。因此，这使得

ColorPicker

组件可重复使用，以便为

PlayerCard

组件拾取可能需要的其他颜色，即文本颜色

这里没有Vuex真正能够解决正确编写的Vue组件无法完成的问题。Vuex只会使围绕问题编写代码变得更容易，而不会解决任何问题。但Vuex确实在更大的应用程序中占有一席之地