Javascript 在react应用程序中呈现外部加载的vue组件

我想从url将外部vue组件作为插件加载到react应用程序中

---

我已经将vue组件捆绑为commonJs包，但它不会在react应用程序中呈现。

我找到了解决方案

Vue项目

main.js

import Vue from 'vue'
import wrap from '@vue/web-component-wrapper'
import Plugin from './components/Plugin'
const CustomElement = wrap(Vue, Plugin)
window.customElements.define('vue-plugin', CustomElement)

./component/Plugin.vue

<template>
   <div class>
      <p>{{text}}</p>
      <p>{{pluginData.text}}</p>
      <button v-on:click="sendData({ text: 'primary click vue' })">primary</button>
      <button v-on:click="sendData({ text: 'secondary click vue' })">secondary</button>
   </div>
</template>
<script>
   export default {
      props: {
      text: String,
      data: String
   },
   computed: {
      pluginData () {
          return JSON.parse(this.data)
      }
  },
  methods: {
     sendData: function(payload) {
        this.$emit('sendData', payload);
     }
  }
}
</script>

并在react应用程序中加载：

const $script = require("scriptjs")

$script("https://external-url-to-your-component.com/plugin.js", () => {
            this.setState({
                Component: ({ data, children, ...props}) => React.createElement(
                    'vue-plugin',
                    {...props, data: JSON.stringify(data), ref: elem => this[name] = elem },
                    children
                )
            })
            this[name].addEventListener('sendData', event => {
                const payload = event.detail
                payload && payload.length && sendData(payload[0])
            })
        })

---

从未处理过这个用例，但如果您对另一个依赖关系持开放态度，这可能会有所帮助：谢谢您的回答，我已经尝试过了，但无法运行它。我会再试一次。目前，我试图将它作为一个完整的插件与roll捆绑在一起。这个页面的底部有一个很好的指南，介绍如何让vue与Vuera一起反应。根据帖子（写在2017年）看来，它可能有bug/未决问题

const $script = require("scriptjs")

$script("https://external-url-to-your-component.com/plugin.js", () => {
            this.setState({
                Component: ({ data, children, ...props}) => React.createElement(
                    'vue-plugin',
                    {...props, data: JSON.stringify(data), ref: elem => this[name] = elem },
                    children
                )
            })
            this[name].addEventListener('sendData', event => {
                const payload = event.detail
                payload && payload.length && sendData(payload[0])
            })
        })