React中vue组件的使用和运行是怎样的
react项目中如何运行vue组件?下面本篇文章就通过示例给大家介绍一下在react项目中运行vue组件的方法,希望对大家有所帮助!
此文的背景源于面试中,被问到,vue和react组件假如需要互通和复用,如何优雅的实现?
除了,开发者手动转代码外。目前,我能想到的就2种解决方案
方案一:vue代码和react代码互转(组件库同步)
方案二:直接让vue组件在React项目中运行,反之也可以。
先看实现效果
vue组件在reat中正常渲染了,并且我还点击了按钮 3下,vue的响应和render也都正常
具体如何实现?
实现原理
引入vue的完整版(考虑性能的话,可以按需引入)
等到componentDidMount阶段,挂载好
div id="vueApp" />
后在
new Vue(..).$mount('#vueApp')
import Vue from 'vue/dist/vue.min.js' // 引入完整版,否则不能解析vue的组件对象语法 export default class App extends Component { constructor(props) { super(props) } componentDidMount() { const Foo = { template: ` div> h1> 我是vue : { { aaa} } /h1> h1> 我是vue : { { aaa} } /h1> h1> 我是vue : { { aaa} } /h1> button @click="aaa++"> 按钮/button> /div> `, data () { return { aaa: 2222 } } } new Vue({ render: h => h(Foo), } ).$mount('#vueApp') } render() { return ( div> h1> 当前是react项目内/h1> h1> 当前是react项目内/h1> 以下将渲染vue组件 div id="vueApp" /> /div> ) } }
注意:
如果只需支持vue的组件选项对象的话,那么不用配置webpack,就完了
vue的组件选项对象 指的是:
const Foo = { template: ` div> h1> 我是vue : { { aaa} } /h1> h1> 我是vue : { { aaa} } /h1> h1> 我是vue : { { aaa} } /h1> button @click="aaa++"> 按钮/button> /div> `, data () { return { aaa: 2222 } } }
高级版
此处高级版指的是:需要支持 .vue文件/组件(上面的demo,直接是组件选项对象,没有.vue文件)
比如:(继续用上面的demo,改几行)
- 改成了引入.vue文件:
import Foo from "./Foo.vue";
import Vue from 'vue/dist/vue.min.js' // 引入完整版,否则不能解析vue的组件对象语法 import Foo from "./Foo.vue"; export default class App extends Component { ... componentDidMount() { new Vue({ render: h => h(Foo), } ).$mount('#vueApp') } ... }
此时要想生效,需要配置vue-loader
- 官网:https://vue-loader.vuejs.org/guide/#manual-setup
// 在 webpack.config.js 内 const { VueLoaderPlugin } = require('vue-loader') module.exports = { mode: 'development', module: { rules: [ { test: /.vue$/, loader: 'vue-loader' } ] } , plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ] }
注意点
建议大家test的时候,不要用react的脚手架起的项目,用从零配置webpack.config.js的react项目
我当前用最新版的脚手架时,run eject后,去往 webpack.config.js 里面写会报错,因为 VueLoaderPlugin 不兼容一个 oneOf的语法
如果不用解析.vue文件的话,直接用vue的组件选项对象语法的话,那么不用额外的配置vue-loader
总结
建议大家test的时候,不要用react的脚手架起的项目,用从零配置webpack.config.js的react项目
如果不用解析.vue文件的话,直接用vue的组件选项对象语法的话,那么不用额外的配置vue-loader
最终在对比一下,vue项目中使用react组件,和, react项目中使用vue组件,配置上的区别!
一定需要配置webpack.config.js的loader吗? | |
---|---|
在vue项目中使用react组件 | yes,需配置babel-loader,编译.jsx文件,需要额外注意配babel-loader的option选项 |
在react项目中使用vue组件 | no,如果不用解析.vue文件的话,直接用vue的组件选项对象语法的话,那么不用额外的配置vue-loader。需要支持.vue文件的话,需要配vue-loader |
关于“React中vue组件的使用和运行是怎样的”的内容就介绍到这,感谢各位的阅读,相信大家对React中vue组件的使用和运行是怎样的已经有了进一步的了解。大家如果还想学习更多知识,欢迎关注网络,小编将为大家输出更多高质量的实用文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: React中vue组件的使用和运行是怎样的
本文地址: https://pptw.com/jishu/654421.html