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

Releases

No releases published

Packages

No packages published