支持复杂场景的vue和react集成引用的JS插件

JavaScript010

支持复杂场景的vue和react集成引用的JS插件,第1张

众所周知,React更纯粹,Vue做的封装更多,所以大多数的难度都是集中在react的组件引用vue组件的过程中

请参考 https://github.com/devilwjp/vuereact-for-vuecli3-demo

请参考 https://github.com/devilwjp/vuereact-for-cra-demo

由于react hooks的取名规范是use开头,所以将use开头的方法全部修改成了apply开头,老的use开头方法仍然有效

在react组件中使用vue组件,如果要使用vue的sync修饰,使用 sync <Object>

在react组件中使用vue的组件

在react组件中,向vue组件传递具名插槽和作用域插槽,以及绑定自定义事件,以及v-model应用

react本身并不支持v-model,所以需要通过 model的value和setter也不需要变化

在react组件动态引用vue组件,类似vue的<component />

与react不同,vue有全局注册组件的功能,使每个组件不需要再单独引入

将vue全局组件的id作为参数传入applyVueInReact中,或者将id作为component属性的值传入VueContainer中

示例:在react中使用全局的vue版本element-ui的DatePicker

在Vue的组件中使用React组件

在Vue组件中,向React组件传递具名插槽和作用域插槽,以及绑定自定义事件

由于React没有插槽的概念,所有都是以属性存在,Vue的具名插槽和作用域插槽会被转化为React的属性,其中作用域插槽会转换成render props的方式

并且Vue组件的事件也会被转化成React的属性

比如react版本的antd的Card组件,在react中的使用示例如下

react版本的antd,在vue组件中使用的示例如下

作用:使得所有的Vue组件可以使用redux的状态管理

对工具包开启redux状态管理,这个场景一般存在于以React为主的项目中,为了使Vue组件也可以共享到redux,需要在项目的入口文件引入applyRedux方法(整个项目应该只引一次),将redux的store以及redux的context作为参数传入(或者至少在redux的Provider高阶组件引入的地方使用applyRedux方法)

React组件连接redux的方式这里就不再做介绍了,应该使用react-redux的connect方法

这里介绍Vue组件如何使用redux,工具包尽可能的实现了vue组件使用vuex的方式去使用redux,通过vm.$redux可以在组件实例里获取到redux状态管理

作用:使得所有的Redux组件可以使用Vuex的状态管理

对工具包开启vuex状态管理,这个场景一般存在于以Vue为主的项目中,为了使React组件也可以共享到vuex,需要在项目的入口文件引入applyVuex方法(整个项目应该只引一次),将vuex的store作为参数传入

类似react-redux的connect方法,在React组件中使用,由于vuex的关键字比redux多,所以将参数改成了对象,包含了mapStateToProps、mapCommitToProps、mapGettersToProps、mapDispatchToProps,每个都是一个纯函数,返回一个对象(和redux的connect使用方式完全一致)

在React的router里懒加载Vue组件

在Vue的router里懒加载React组件

每个通过applyVueInReact的的vue组件,以及通过applyReactInVue的react组件,都可以收到一个data-passed-props的属性,这个属性可以帮助你不做任何包装的,被之后再次使用applyVueInReact或applyReactInVue的组件收到全部的属性(由于是跨框架透传,原生的透传方式并不会自动做相应的封装和转换)

由于在每一次跨越一个框架进行组件引用时,都会出现一层包囊,这个包囊是以div呈现,并且会被特殊属性标注

React->Vue,会在vue组件的dom元素外包囊一层标识data-use-vue-component-wrap的div

Vue->React,会在react组件的dom元素外包囊一层标识__use_react_component_wrap的div

如果引发样式问题,可以全局对这些标识进行样式修正

插件通常用来为 Vue 添加 全局功能 ,所谓全局即不需要像组件那样,每次使用他前都需要先引入一次。对于插件只要在 最开始引入一次,在任何组件就可以直接使用 。(类似于我们在window上添加的方法属性那样,任何地方都可以用)

下面几种常见的用途:

主要两种使用方式

一:全局引入方式

(1)使用步骤

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成

也可以传入一个可选的选项对象:

(2)在main.js中配置

比如:使用element-ui为例:

组使用件中

二:组件引入方式

比如,以使用 swiper为例

组件中使用

vue插件其实就是一个简单的 js对象而已 ,然后这个插件对象有一个公开属性 install ,他的值为一个函数,此函数接受两个参数。第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象。

一:开发插件有四种方法

二:添加实例方法

其中最常用的:【4. 添加实例方法】的写法和使用方法,下面举例说明toast 最简单插件开发过:

(1)新建一个plugin目录,编辑插件toast.js文件

(2)在 main.js 中,需要导入 toast.js 并且通过全局方法 Vue.use() 来使用插件

(3)我们在组件中来获取该插件定义的 $msg 属性,比如在根组件App.vue中

控制台输出:Hello World

三:添加全局资源

这里主要介绍过滤器

(1)在plugin目录新建插件filter.js文件

(2)在 main.js 中,需要导入 filter.js 并且通过全局方法 Vue.use() 来使用插件

(3)HelloWorld.vue页面上使用

添加全局资源也可以不放在插件里面实现,可以直接在main.js入口文件创建Vue实例前添加:

其他组件就可以通过this直接使用:

(1)核心区别

简单来说,插件就是指对Vue的功能的增强或补充。

(2)其他区别

一个Vue插件可以是一堆Vue组件的集合(插件干的事就是把内部的组件帮你倒入到vue全局下),也可以是用来扩展Vue功能的,比如 Vuex, Vue-Router。

测试完成,下面就要把的内容打包发布到npm 上去,具体步骤可以参照

https://www.cnblogs.com/adouwt/p/9211003.html