Skip to content

njleonzhang/babel-plugin-vue-jsx-sync

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

babel-plugin-vue-jsx-sync

jsx plugin for vue sync modifier, inspired by babel-plugin-jsx-v-model

Usage

  • 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$sync instead of visible.sync, because visible.sync is an illegal syntax in jsx.

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"]
    )]
  );
}

dev

npm install -g parcel-bundler
npm install
npm run dev

build doc

npm run doc

About

jsx plugin for vue sync modifier

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published