babel-preset-vca-jsx
Support for automatic import of
createElement as h
andsetup
functional component syntax andsetup
template refs
Feature
- Automatically import
createElement as h
when writingJSX
- The functional component syntax of the
setup()
by defaultconst Hello = {const state = ;return <h1>statevalue</h1>;}; - Allocating template refs with
JSX
on the render function returned bysetup()
const Hello =; - Fixed @vue/babel-sugar-v-model@1.1.2 calling
this
insetup()
Example
Before compiling
; const Hello = { const state = ; return <h1>statevalue</h1> ;};
After compilation
; const Hello = { const state = ; return { return ; }; };
Prerequisite
Project with @vue/composition-api
and @vue/cli-plugin-babel
installed
How to use?
-
Install
npm install babel-preset-vca-jsx --save-dev -
Config
babel.config.js
moduleexports =presets:"vca-jsx""@vue/cli-plugin-babel/preset";
Note
-
Here we need to distinguish between the default
functional
component and thecomposition-api-based
functional
component.-
The default
functional
component is essentially therender
function. The shorthand injsx
is as followsconst Test = {return <h1>Hello World!</h1>;};Tips:The first letter of the variable name must be capitalized. For details of the callback parameters, see Detail
-
The
composition-api functional
component based on this plugin is essentially asetup
function, and the shorthand injsx
is as followsconst Test = {return <h1>Hello World!</h1>;};Tips:The difference from the default
functional
is that arender
function is returned
-