vue3在js中调用组件，使用createApp方法如何调用emit？

  • Z时代
  • 2024-03-01
  • 分类：IT

问题描述

原先有一个验证码的组件，现在需要在一个全局的处理中调用，但需要使用emit时不知道如何调用

问题出现的环境背景及自己尝试过哪些方法

参考createApp和h函数的文档，做了一些尝试
使用createApp创建，可以调用子方法可以传入props，可以传入回调方法，但是不知道如何接收emit参数。
使用h函数，我知道如何接收emit，但是不知道如何调用Captcha组件中expose的方法

相关代码

import Captcha from './index.vue'
export default ({ isEnableClose, onSuccess }: captchaOptions) => {
  const mountNode = document.createElement('div')
  const instance = createApp(Captcha, {
    isEnableClose,
    onSuccess: async () => {
      if (onSuccess) {
        await onSuccess()
      }
    }
  }) as any
  // const instance = createApp({
  //   render() {
  //     return h(Captcha, {
  //       isEnableClose,
  //       onShowCaptcha: () => {
  //         console.log('onShowCaptcha')
  //       },
  //       onOnSuccess: () => {
  //         onSuccess && onSuccess()
  //         console.log('onOnSuccess')
  //       }
  //     })
  //   }
  // })
  document.body.appendChild(mountNode)
  instance.mount(mountNode)
  instance.showCaptcha = () => {
    instance?._instance?.exposed?.showCaptcha()
  }
  instance.closeCaptcha = () => {
    instance?._instance?.exposed?.closeCaptcha()
  }
  return instance
}

你期待的结果是什么？实际看到的错误信息又是什么？

希望能够得到一个能在js中调用组件的正确方法，可以使用props、emits和expose。
或者可能是我的思路有问题，组件不应该通过这种方式在全局加载，那么应该以何种形式调用？

回答：

import { createApp } from 'vue';
import Captcha from './Captcha.vue';
const app = createApp({
  components: {
    Captcha
  }
});
app.mount('#app');

以上是 vue3在js中调用组件，使用createApp方法如何调用emit？ 的全部内容， 来源链接： utcz.com/p/934625.html

回到顶部