时间戳

首页 > 解决方案 > 如何将组件对象移动到全局对象？

javascript - 如何将组件对象移动到全局对象？

问题描述

我目前正在开发音乐播放器，我有一个“曲目”组件，用于检索显示歌曲列表的 ajax 请求。onClick 我将歌曲数据放入我试图发送到一个完全不相关的组件的对象中，该组件是音频播放器。将此数据发送到音频播放器的最佳方式是什么？

追踪

<template>
<div id="tracks">
  <h5 class="header">Top tracks</h5>

  <select name="range" v-model="range">
    <option value="day">Day</option>
    <option value="week">Week</option>
    <option value="month">Month</option>
    <option value="year">Year</option>
    <option value="life">Life</option>
  </select>
  <br>
  <div id="top-tracks">
  <div id="track"  v-for="(track) in tracks" :key='track.id'>
    <img @click="currentTrack(track)" class="cover" :src="'https://api.napster.com/imageserver/v2/albums/' + track.albumId  + '/images/500x500.jpg'">

    <div class=content-name><p>{{track.name}}</p></div>
    <div class="artist-name"><p>{{track.artistName}}</p></div>
  </div>
  </div>

</div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Tracks',
  components: {
  },
  data () {
    return {
      tracks: [],
      track: {
        name: "",
        artist: "",
        album: "",
        song: ""
      },
      range: 'day'
    }
  },
  created() {
    this.trackData();
  },
  watch: {
    range : function () {
      this.trackData();
    }
  },
  methods: {
    trackData: function () {
      axios.get('http://api.napster.com/v2.2/tracks/top?apikey=YTkxZTRhNzAtODdlNy00ZjMzLTg0MWItOTc0NmZmNjU4Yzk4&limit=10&range=' + this.range)
      .then(response => {
        // JSON responses are automatically parsed.
        this.tracks = response.data.tracks
      })
      .catch(e => {
        this.errors.push(e)
      })
    },
    currentTrack: function (track) {
      this.track.name = track.name;
      this.track.artist = track.artistName;
      this.track.album = track.albumId;
      this.track.song = track.href;

    }
  }
}
</script>

音频播放器

<template>
  <div id="audio-player">
    <div class="player__inner">

      <current-track class="player__left"/>

      <div class="player__center">
        <player-controls/>
        <player-playback/>
      </div>

      <div class="player__right">
        <!-- <device-picker/> -->
        <!-- <volume-bar/> -->
      </div>
    </div>
  </div>
</template>

<script>
  import CurrentTrack from './CurrentTrack';
  import PlayerControls from './PlayerControls';
  import PlayerPlayback from './PlayerPlayback';

  export default {
      name: "audio-player",
      components: {
        CurrentTrack,
        PlayerControls,
        PlayerPlayback
      },
      data () {
        return {

        }
      }
  }
</script>

标签： javascriptvue.js

解决方案

随着您的应用程序变得越来越大和越来越复杂，Vuex会很好用，但它也引入了诸如突变和动作之类的概念，您可能需要一些时间来理解这些概念。实现您想要的更简单的方法是设置根组件的数据。只需设置根 Vue 组件的 data 属性并使用this.$root.$data. 代码将是这样的：

new Vue({
  ...
  data: {
    user: ...
  }
})

推荐阅读