Javascript 尝试使用单键功能将播放列表从阵列添加到另一个组件

假设您有一个来自数据库（比如歌曲）的对象数组，并且它是使用v-for渲染的。 我想创建一个按钮，该按钮具有将每个对象歌曲添加到另一个组件的功能。请记住，我不知道对象键，因为我不知道该数组中有多少对象。 还要记住，按钮是使用相同的v-for添加到每个列表中的

Vue前20名艺术家


{{artist.name}
添加到播放列表


导出默认值{
名称：'测试'，
道具：[“艺术家”]，
方法：{
添加播放列表（）{
让我们来看看
警报（对象键（嘿））
}
}
} 

如何使用艺术家作为方法的参数：

<template>
  <div>
    <h1>Vue Top 20 Artists</h1>
      <ul>
      <li class="list" v-for="(artist, x) in artists" :key="x">
        <h3>{{artist.name}}</h3>
        <button @click="addPlayList(artist)">Add to playlist</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Test',
  props: ["artists"],
  methods:{
    addPlayList(artist){
      alert(artist)
    }
  }
} 
</script>

Vue前20名艺术家


{{artist.name}
添加到播放列表


导出默认值{
名称：'测试'，
道具：[“艺术家”]，
方法：{
添加播放列表（艺术家）{
警惕（艺术家）
}
}
} 

---

如果要将单击的按钮转移到父元素，请使用此。$emit（）详细说明：

如果“其他组件”是您的子组件，则您很可能会将列表作为道具传递。如果它是您的父对象，则可以将其与自定义事件一起发出。您可以使用Vuex“全局”共享您的列表。不过，在将其传递到其他地方之前，首先必须在当前组件中准备播放列表。您可以将“播放列表”添加到

数据中，例如：
数据：（）=>（{playlist:[]}）

然后，您的功能会将新的艺术家推送到“播放列表”中。
您可以将
artist
传递给您的函数，如：
@click=“addPlayList（artist）”

因此，如果您的“其他组件”是您的孩子，它可能会如下所示：


Vue前20名艺术家


{{artist.name}
添加到播放列表




导入“SomeComponent”表单“…”
导出默认值{
名称：'测试'，
组件：{SomeComponent}，
道具：[“艺术家”]，
数据：（）=>（{playlist}）
方法：{
添加播放列表（艺术家）{
此.playlist.push（艺术家）
}
}
}

如果它是一个父组件
addPlayList
函数可能如下所示：

addPlayList（艺术家）{
此.playlist.push（艺术家）
this.$emit（'some-event'，this.playlist）
}