How to use JSX in Vue

What is JSX

JSX is a syntax extension of Javascript, JSX = Javascript + XML, that is, XML is written in Javascript. Because of this feature of JSX, it has the flexibility of Javascript and the semantics and intuition of html at the same time

Why use JSX in Vue

Sometimes, we use the rendering function (render function) to abstract components. The rendering function is not very clear. See the official document, and the rendering function is sometimes very painful to write

createElement(
 'anchored-heading', {
 props: {
  level: 1
 }
 }, [
 createElement('span', 'Hello'),
 ' world!'
 ]
)

Its corresponding template is the following:

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

This is obviously thankless, so JSX was sent to play at this time. Using JSX in Vue requires the Babel plug-in, which takes us back to syntax closer to templates. Let's start writing JSX in Vue from scratch

Begin

Create 1 Vue project by quick reading, and create 1 project directly using vue-cli:

#  Just enter the car directly 
vue create vue-jsx

Installation dependencies:

npm install @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props

Configuration. babelrc:

module.exports = {
 presets: [
 '@vue/cli-plugin-babel/preset',
 ['@vue/babel-preset-jsx',
  {
  'injectH': false
  }]
 ]
}

Basic content

Here are some basic contents written in Vue, including plain text, dynamic content, tag use and custom component use, which are similar to the single file component we usually use, as follows:

render() {
 return (
 <div>
  <h3> Content </h3>
  {/*  Plain text  */}
  <p>hello, I am Gopal</p>
  {/*  Dynamic content  */}
  <p>hello { this.msg }</p>
  {/*  Input box  */}
  <input />
  {/*  Custom components  */}
  <myComponent></myComponent>
 </div>
 );
}

Attributes/Props

The binding of Attributes is similar to the common HTML structure 1

render() {
 return <div><input placeholder="111" /></div>
}

Note that if the dynamic attribute, previously v-bind: placeholder= "this. placeholderText" becomes placeholder= {this. placeholderText}

render() {
 return <input
   type="email"
   placeholder={this.placeholderText}
   />
}

We can also expand an object

render (createElement) {
 return (
  <button {...this.largeProps}></button>
 )
}

Like input tags, you can bind attributes in batches as follows

const inputAttrs = {
 type: 'email',
 placeholder: 'Enter your email'
};
render() {
 return <input {...{ attrs: inputAttrs }} /> 
}

Slot

Let's look at how to implement named slots and scoped slots

Named slot: The parent component is written similarly to the single-file component template, specifying where to insert through slot= "header". The subcomponent specifies the name of the slot through this. $slots. header, where header is the name of the slot

Parent component:

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

0

Subcomponents:

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

1

Scope slot: Specify the name of the slot as test in the child component through {this. $scopedSlots. test ({user: this. user})} and pass user to the parent component. When the parent component writes the label of the child component, it specifies that the insertion position is test through the scopedSlots value, and obtains the user value passed by the child component in the callback function

Parent component:

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

2

Subcomponents:

render() {
 return (
 <div>
  {this.$scopedSlots.test({
  user: this.user
  })}
 </div>
 );
}

Instruction

Common instructions are as follows:

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

4

Functional component

Functional component is a stateless and instantaneous component. Please refer to official website for details. Create a new FunctionalComponent. js file with the following contents:

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

5

The following is called in the parent component:

<anchored-heading :level="1">
 <span>Hello</span> world!
</anchored-heading>

6

These are the details of how to use JSX in Vue. For more information about using JSX in Vue, please pay attention to other related articles on this site!