How to use JSX in Vue

What is JSX

JSX is a syntax extension of Javascript, JSX = Javascript + XML, that is, writing XML in Javascript. Because of this feature of JSX, it has the flexibility of Javascript and the semantics and intuitiveness of HTML.

Why use JSX in Vue?

Sometimes, we use render functions to abstract components. Render functions are not very clear, please refer to the official documentation, and render functions are sometimes very painful to write.

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

The corresponding template is as follows:

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

This is obviously a thankless task, and this is where JSX comes in. To use JSX in Vue, you need to use the Babel plugin, which allows us to return to a syntax closer to the template. Next, let's start writing JSX in Vue.

start

Quickly create a Vue project and use vue-cli to create a project:

# Just press Enter vue create vue-jsx

Installation dependencies:

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

Configure .babelrc:

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

Basic content

Here we show some basic content written in Vue, including plain text, dynamic content, label usage, and custom component usage, which are similar to the single-file components we usually use, as shown below:

render() {
 return (
 <div>
  <h3>Contents</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

Attributes binding is the same as normal HTML structure

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

Note that if the dynamic attribute is v-bind:placeholder="this.placeholderText" before, it 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 the input tag, you can batch bind attributes as follows

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

Slots

Let's see how to implement named slots and scoped slots.

Named slots: The parent component is written similarly to the single-file component template, and the location to be inserted is specified by slot="header". The subcomponent specifies the name of the slot through this.$slots.header, where header is the name of the slot.

Parent component:

render() {
 {/* named slot */}
 <myComponent>
 <header slot="header">header</header>
 <header slot="content">content</header>
 <footer slot="footer">footer</footer>
 </myComponent>
}

Subcomponents:

render() {
 return (
 <div>
  {/* Plain text */}
  <p>I am a custom component</p>
  {this.$slots.header}
  {this.$slots.content}
  {this.$slots.footer}
 </div>
 );
}

Scoped slots: In the child component, {this.$scopedSlots.test({ user: this.user })} specifies that the name of the slot is test, and passes the user to the parent component. When the parent component writes the subcomponent tag, it specifies the insertion position as test through the scopedSlots value, and obtains the user value passed in by the subcomponent in the callback function.

Parent component:

render() {
 {/* named slot scope slot*/}
 <myComponent {
 ...{
  scopedSlots: {
  test: ({user}) => (
   <div>{user.name}</div>
  )
  }
 }
 }>
 </myComponent>

Subcomponents:

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

instruction

Common instructions are as follows:

render() {
 {/* instructions */}
 {/* v-model */}
 <div><input vModel={this.newTodoText} /></div>
 {/* v-model and modifiers*/}
 <div><input vModel_trim={this.tirmData} /></div>
 {/* v-on listener event*/}
 <div><input vOn:input={this.inputText} /></div>
 {/* v-on listener events and modifiers*/}
 <div><input vOn:click_stop_prevent={this.inputText} /></div>
 {/* v-html */}
 <p domPropsInnerHTML={html} />
}

Functional Components

A functional component is a stateless, instanceless component. For details, see the official website. Create a new FunctionalComponent.js file with the following content:

export default ({ props }) => <p>hello {props.message}</p>

The parent component is called as follows:

import funComponent from './FunctionalComponent'

...

render() {
 return {/* Functional component*/}
  <funComponent message="Gopal"></funComponent>
}

The above is 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 123WORDPRESS.COM!