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