從其他組件調用組件方法

Question

我的頁面上顯示了一個播放列表列表。 此列表由外部 API 提供。 每個播放列表都有一個刪除按鈕，我正在嘗試使這個按鈕起作用。

API 中的刪除工作正常，因為播放列表已從 API 中刪除。 現在缺少的部分是從我的視圖中刪除播放列表。

我有一個名為“Playlists.vue”的組件，其中包含以下代碼：

<div class="playlists" v-if="playlists">
        <playlist v-for="playlist in playlists"
                  v-bind:key="playlist.id"
                  v-bind:playlist="playlist">
        </playlist>
        <span v-if="playlists.length === 0">No playlist found</span>
</div>

在 Playlists.vue 文件中，一個 fetchData 函數提供數據：

 methods: {
      async fetchData() {
        const playlists = await api.getAllPlaylists();
      }
    }

然后我有另一個組件來顯示單個播放列表 Playlist.vue ：

<div class="row">
    <div class="col">
      <textarea v-model="playlist.name" v-on:blur="updatePlaylist"></textarea> 
      <button v-on:click="deletePlaylist(playlist.id)">Delete</button>
    </div>
  </div>

我嘗試在每次刪除后重新調用 fetchData 函數，以更新播放列表變量以獲取刪除后的更新列表。 所以我首先以這種方式導入組件 Playlists.js：

 import playlists from './Playlists';

然后我在刪除函數中調用了 fetchData 函數：

deletePlaylist(id) {
        playlist.deletePlaylist(id);
        playlists.fetchData();
},

但不幸的是它不起作用，我總是收到這個錯誤：

未捕獲的類型錯誤： WEBPACK_IMPORTED_MODULE_2__Playlists .a.fetchData 不是函數

我嘗試了其他解決方案，但我無法在 Playlist.vue 中調用 Playlists.vue 中的方法

任何修復？ 或者可能是更好的解決方案？

非常感謝

Answer 1

我認為一個好的解決方案是使用 Mixin。 您可以按如下方式執行全局 Mixin。

Vue.mixin({
  methods: {
     async fetchData() {
       const playlists = await api.getAllPlaylists();
     }
  }
});

把它放在你的主 Vue 實例之前，它將可用於你的任何組件。

如果您不希望它在全球范圍內可用，請將其定義如下。

var fetchData = {
  methods: {
     async fetchData() {
       const playlists = await api.getAllPlaylists();
     }
  }
}

然后將其包含在您的組件定義中

  export default {
     mixins: [fetchData],
     data(){
        //...
     }
  }

更多關於 Mixins https://v2.vuejs.org/v2/guide/mixins.html