VueJS：如何注册组件并从自定义插件中访问调用它

Alright, let's break this down into two main parts: registering your CertificateDialogComponent and then accessing/calling it from your custom plugin. Here's how to do it step by step:

1. Register the CertificateDialogComponent #

You have two options here: global registration (available app-wide) or local registration (only for specific components).

Global Registration (Vue 2) #

Add this to your app's entry file (like main.js) or your custom plugin's setup code:

import Vue from 'vue'
import CertificateDialogComponent from './path/to/CertificateDialogComponent.vue'

// Register the component globally with a custom name
Vue.component('CertificateDialog', CertificateDialogComponent)

Global Registration (Vue 3) #

For Vue 3, you'll use the app instance instead:

import { createApp } from 'vue'
import App from './App.vue'
import CertificateDialogComponent from './path/to/CertificateDialogComponent.vue'

const app = createApp(App)
app.component('CertificateDialog', CertificateDialogComponent)
app.mount('#app')

Local Registration (For Specific Components) #

If you only need the dialog in certain components, register it directly in those files:

<script>
import CertificateDialogComponent from './path/to/CertificateDialogComponent.vue'

export default {
  components: {
    CertificateDialog: CertificateDialogComponent
  }
}
</script>

2. Call the Component from Your Custom Plugin #

To make the dialog usable from your plugin, we'll add a global method that dynamically creates and controls the dialog instance. First, update your component to expose methods and emit events for selection/closure:

Step 1: Update the Dialog Component #

Add selection handling and expose an open method to trigger the dialog:

<template>
  <el-dialog 
    ref="dialog" 
    title="Choose Certificate" 
    :visible.sync="show" 
    append-to-body 
    :before-close="hideDialog" 
    width="40%"
  >
    <el-table 
      ref="table" 
      :data="certificates" 
      stripe 
      style="width: 100%"
      @row-click="handleRowSelect"
    >
      <el-table-column prop="subject" label="Subject"></el-table-column>
      <!-- Add other columns as needed -->
    </el-table>
    <template #footer>
      <el-button @click="hideDialog">Cancel</el-button>
      <el-button type="primary" @click="confirmSelection" :disabled="!selectedCert">Confirm</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  props: {
    certificates: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      show: false,
      selectedCert: null
    }
  },
  methods: {
    hideDialog() {
      this.show = false
      this.$emit('dialog-closed')
    },
    handleRowSelect(row) {
      this.selectedCert = row
    },
    confirmSelection() {
      if (this.selectedCert) {
        this.$emit('certificate-selected', this.selectedCert)
        this.hideDialog()
      }
    },
    // Expose method to open the dialog from outside
    open() {
      this.show = true
      this.selectedCert = null // Reset selection on open
    }
  }
}
</script>

Step 2: Integrate into Your Custom Plugin #

Vue 2 Plugin Implementation

Create a plugin file (e.g., certificate-selector-plugin.js) that adds a global method to trigger the dialog:

import Vue from 'vue'
import CertificateDialogComponent from './path/to/CertificateDialogComponent.vue'

const CertificateDialogConstructor = Vue.extend(CertificateDialogComponent)

export default {
  install(Vue) {
    // Add a global method to Vue prototype
    Vue.prototype.$selectCertificate = function(certificates) {
      return new Promise((resolve, reject) => {
        // Create component instance
        const dialogInstance = new CertificateDialogConstructor({
          propsData: { certificates }
        })
        
        // Mount to DOM
        dialogInstance.$mount()
        document.body.appendChild(dialogInstance.$el)

        // Handle selection
        dialogInstance.$on('certificate-selected', (selectedCert) => {
          resolve(selectedCert)
          // Clean up after dialog closes
          setTimeout(() => {
            dialogInstance.$destroy()
            document.body.removeChild(dialogInstance.$el)
          }, 300)
        })

        // Handle cancellation
        dialogInstance.$on('dialog-closed', () => {
          reject(new Error('User cancelled certificate selection'))
          setTimeout(() => {
            dialogInstance.$destroy()
            document.body.removeChild(dialogInstance.$el)
          }, 300)
        })

        // Open the dialog
        dialogInstance.open()
      })
    }
  }
}

Register the plugin in main.js:

import Vue from 'vue'
import CertificateSelectorPlugin from './path/to/certificate-selector-plugin.js'

Vue.use(CertificateSelectorPlugin)

Now you can call it from anywhere in your app (including other plugins):

// Example usage in a component or another plugin
this.$selectCertificate(yourCertificateDataFromOtherPlugin)
  .then(selectedCert => {
    console.log('Selected certificate:', selectedCert)
    // Handle the selected certificate here
  })
  .catch(err => {
    console.log('Selection cancelled:', err)
  })

Vue 3 Plugin Implementation

For Vue 3, the syntax changes slightly to use createVNode and render:

import { createVNode, render } from 'vue'
import CertificateDialogComponent from './path/to/CertificateDialogComponent.vue'

export default {
  install(app) {
    app.config.globalProperties.$selectCertificate = (certificates) => {
      return new Promise((resolve, reject) => {
        const container = document.createElement('div')

        // Create virtual node with props and event handlers
        const vnode = createVNode(CertificateDialogComponent, {
          certificates,
          onCertificateSelected: (selectedCert) => {
            resolve(selectedCert)
            render(null, container)
            document.body.removeChild(container)
          },
          onDialogClosed: () => {
            reject(new Error('User cancelled certificate selection'))
            render(null, container)
            document.body.removeChild(container)
          }
        })

        // Mount to DOM
        render(vnode, container)
        document.body.appendChild(container)

        // Call the component's open method
        vnode.component.exposed.open()
      })
    }
  }
}

Register in main.js:

import { createApp } from 'vue'
import App from './App.vue'
import CertificateSelectorPlugin from './path/to/certificate-selector-plugin.js'

const app = createApp(App)
app.use(CertificateSelectorPlugin)
app.mount('#app')

Usage in Vue 3 components:

import { getCurrentInstance } from 'vue'

export default {
  setup() {
    const appContext = getCurrentInstance().appContext
    const $selectCertificate = appContext.config.globalProperties.$selectCertificate

    const pickCertificate = async () => {
      try {
        const selectedCert = await $selectCertificate(yourCertificateData)
        console.log('Selected:', selectedCert)
      } catch (err) {
        console.log('Cancelled:', err)
      }
    }

    return { pickCertificate }
  }
}

内容的提问来源于stack exchange，提问作者Илья Болотов