You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
// index.tsximportReactfrom'react';import{render}from'react-dom';import{VueWrapper}from'vuera';importMoudleWrapperfrom'./MoudleWrapper.vue';render(<div><h2>下面是vue组件</h2><VueWrappercomponent={MoudleWrapper}msg="message pass by props"onCountChange={console.log}/></div>,document.getElementById('app'),);
前言
是不是看标题就感觉很蛋疼?
最近项目在基于 react 重构, 但是依赖的一个公共业务组件是 vue 的, 并且暂时没有使用 react 重构的计划, 但是总不能一直等下去, 遂尝试在 react 里渲染 vue 组件
vuera
需要借助 vuera(https://github.com/akxcv/vuera) 来做这个事情
同时, webpack里需要同时配置 react 和 vue 的 loader
首先, 写一个典型的 vue 组件
然后, 在 react 里面渲染 vue 组件
渲染效果:
向 vue 组件传参
react 里就像正常 react 组件一样传参即可
vue 里也是和正常 vue 组件一样, 定义 props
接收 vue 组件抛出的事件
在 vue 里面可以调用
this.$emit('xxx')
抛出事件但是, react 组件里, 不能直接用
@xxx
或者v-on:xxx
绑定事件, 但是可以通过 props 传递 function, 在 vue 组件里调用 props functionvue 组件对外抛出事件
如果 vue 组件不受自己控制, 不能修改源码的话, 也可以自己封装一层, 将 props function 转为 @xxx
使用
this.$emit()
的 vue 组件创建中间适配层组件
MoudleWrapper
修改入口文件, 改为渲染 MoudleWrapper 组件
打包
使用 vue 组件, 会把完整的 vue.js 打包进去
如果该 vue 组件并不是初始状态就需要展示的话, 可以做按需加载打成一个单独的 chunk, 使其不影响页面初始渲染时间
下面是一个按需加载的例子, 新增 App 组件来做动态展示和按需加载的逻辑
运行效果如下:
The text was updated successfully, but these errors were encountered: