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

Question

我做了一个名为dialog的组件，我想把它做成插件，并把它注册为一个全局函数，但是我不知道如何从插件中访问组件并调用组件的方法。

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

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

Answer 1

一个组件的方法只能在组件本身的内部被调用。试图将它们暴露给外部代码调用，实际上是违背Vue的设计工作方式的。

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

1. Props - 而不是 isShow 作为AlertDialog状态的一部分，你可以将这个值作为一个道具传递进来。这样，父组件就可以根据需要改变这个值来隐藏警报。

2. Vuex - 如果你需要在你的应用程序中拥有一个组件的单一实例（例如吐司显示），那么让它从一个叫做 "D "的应用程序中接收它的状态。Vuex 商店将使您的应用程序的任何部分都能轻松显示消息。

3. 事件总线 - 对于一个简单的应用程序，如果你不想使用Vuex，你可以随时使用 使用Vue的实例作为事件总线。通过从应用程序的任何地方发出事件来控制你的组件。然后，你的组件可以监听这些事件并在需要时显示出来。