RVBridge is a tool for invoking RegularJS components in a Vue project.
It can bring you the experience of invoking RegularJS components as same as that of vue components.
That's useful when you wanna gradually migrate your old RegularJS projects to Vue projects. You can take it as a transition solution, quickly reuse old Regular components before you rewrite it in Vue.
- Support passing any types of props
- Support custom events
- Support
.sync
syntax - Support the default slot as regular's
{#inc this.$body}
- Support getting
ref
of regular components - Support auto recycling after components were destroyed
$ npm i -S rvbridge
Then, import it into your Vue projects, just like:
import connectFrom, { getRef } from 'rvbridge'
Use RVBridge to connect Vue components with Regular components, just take two things:
- Firstly, import Regular components:
import _Switcher from '@/regular/components/switcher'
- Secondly, invoke RVBridge:
const Switcher = connectFrom(_Switcher, ['checked'])
Now, you can use the component like a Vue component, for example:
export default {
// ...
data() {
return {
checked: false
}
},
components: {
Switcher
},
methods: {
handleToggle() {
this.checked = !this.checked
}
}
}
templates are like:
<switcher :checked="checked" @toggle="handleToggle" />
- You should manually declare props in the stage of connecting to expose props. The way of declaration is passing them to the second param of
connectFrom()
. For example, theSwitcher
component has achecked
prop, so add it to the props array param. - If you wanna implement the same effects like regular's dual-direction data binding. Use vue's
.sync
syntax and declare it including.sync
as well. For example:
<sample-comp :value.sync="value" />
const SampleComp = connectFrom(_SampleComp, ['value.sync'])
- If you wanna get the reference of components, instead of using
this.$refs.refName
, you should usegetRef(this.$refs.refName)
to get the real Regular components' instance.getRef()
is an util provided by RVBridge. - You can freely use default slot as regular components'
this.$body
, there are no limits of slot contents, and Vue's DOM-Diff patch will still work.