如何在插件中调用组件的方法答案

【问题标题】：How to call a method of component in plugin如何在插件中调用组件的方法
【发布时间】：2020-09-21 15:12:50
【问题描述】：

我做了一个叫对话框的组件，我想把它做成插件并注册为一个全局函数。

但是，我不知道如何从插件访问组件并调用组件的方法。

import Vue from 'vue'
import AlertDialog from '@/components/AlertDialog'

const methods = {
  openDialog: (
    maxWidth,
    title,
    message
  ) =>
    AlertDialog.openDialog(
      maxWidth,
      title,
      message
    ),
  closeDialog: () => AlertDialog.closeDialog()
}

Vue.prototype.openDialog = methods.openDialog
Vue.prototype.closeDialog = methods.closeDialog

这是一个 dialog_plugin.js。

但它不起作用。

编辑 ::

<template>
  <v-dialog
    v-if="isShow"
    v-model="isShow"
    :max-width="maxWidth ? maxWidth : 290"
  >
    <v-card>
      ...
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
      maxWidth: null,
      title: null
    }
  },
  methods: {
    openDialog(
      maxWidth,
      title
    ) {
      this.isShow = true
      ...
    },
    closeDialog() {
      this.isShow = false
    }
  }
}
</script>

这是 AlertDialog.vue

【问题讨论】：

我怀疑AlertDialog 不是组件instance，而是组件定义对象，对吧？
这是AlertDialog.vue文件的导入。为文件添加了内容。请检查。
您不能调用AlertDialog.openDialog，因为AlertDialog 不是该组件的实例。您需要在模板中的某处有一个AlertDialog，并带有一个ref，以便您可以在其上调用方法。或许放入根组件模板，然后调用this.$root.$refs.dialog.openDialog即可。
我在 AlertDialog 组件的模板中添加了一个引用，但在 $refs 中看不到“对话框”。我需要将此组件添加到布局中吗？如果是这样，请告诉我您是否有使对话框成为全局函数的好方法，因为更改布局结构是有限制的。
引用不应该在 AlertDialog 模板中，您实际上需要在其他地方拥有<AlertDialog ref="dialog">。您必须在某处拥有<AlertDialog> 才能创建它的实例；仅仅导入 AlertDialog 是不够的。

标签： vue.js plugins components nuxt.js

【解决方案1】：

组件的方法只能在组件内部调用。试图让它们被外部代码调用确实违背了 Vue 的设计工作方式。

如果你想从外部影响组件的状态，有几种方法：

Props - 不是 isShow 成为 AlertDialog 状态的一部分，而是将此值作为道具传递。这样，父组件可以根据需要更改值以显示/隐藏警报。
Vuex - 如果您需要在您的应用程序中拥有一个组件的单个实例（例如，用于 toast 显示），让它从 Vuex 商店接收其状态将使可以轻松显示来自应用任何部分的消息。
事件总线 - 对于不想引入 Vuex 的更简单的应用程序，您可以随时use an instance of Vue as an event bus，通过从其他任何地方发出事件来控制您的组件你的应用程序。然后，您的组件可以侦听这些事件并根据需要显示/隐藏。

【讨论】：