从其他组件调用组件方法答案

【问题标题】：Call a component method from other component从其他组件调用组件方法
【发布时间】：2018-03-10 20:00:40
【问题描述】：

我的页面上显示了一个播放列表列表。此列表由外部 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 调用方法

有什么办法吗？或者更好的解决方案？

非常感谢

【问题讨论】：

显示getAllPlaylists的代码
组件从不直接调用彼此的方法。您需要在想要进行调用的组件上发出一个事件，并且即使在该方法所在的组件中也要监听它。这称为松散耦合，是面向组件开发的基本原则。

标签： javascript vue.js

【解决方案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://vuejs.org/v2/guide/mixins.html

【讨论】：