jsx plugin for vue sync modifier, inspired by babel-plugin-jsx-v-model
- install
yarn add -D babel-plugin-vue-jsx-sync or npm install babel-plugin-vue-jsx-sync --save-dev - add the plugin to
.babelrc
{ "presets": [ ["env", { "modules": false }], "stage-2" ], "plugins": ["transform-runtime", "vue-jsx-sync", "transform-vue-jsx"], ...... } } - use in jsx
function a() { return ( <div> <component visible$sync={this.test}>I am newbie</component> </div> ) } Notice: we need to use
visible$syncinstead ofvisible.sync, becausevisible.syncis an illegal syntax injsx.
is complied to:
function a() { return h( "div", null, [h( "component", { attrs: { visible: this.test }, on: { "update:visible": $$val => { this.test = $$val; } } }, ["I am newbie"] )] ); } npm install -g parcel-bundler npm install npm run dev npm run doc