Question

我想将外部vue组件作为插件从URL加载到react应用中。

我已经将vue组件捆绑为commonJs包，但不会在react app中呈现。

Answer 1

我找到了解决方法

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>

然后使用以下内容构建Web组件：

vue-cli-service build --target wc --name vue-plugin ./src/main.js

并使用以下命令加载到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])
            })
        })

在React App中渲染外部加载的Vue组件

1 个答案: