How to use JSX with Vue3?

1. Basic application of JSX in Vue3

• Use .jsx format files and defineComponent

• defineComponent can be passed into the setup function or component configuration

• Use single brackets for interpolation {}

1.1 Using jsx in .vue files

// 父
 
<template>
  <div class="home">
    <JSXDemo1 />
  </div>
</template>
 
<script>
import JSXDemo1 from &#39;@/components/JSXDemo1.vue&#39;
export default {
  name: &#39;HomeView&#39;,
  components: {
    JSXDemo1
  }
}
</script>
 
// JSXDemo1.vue
 
<script>
import { ref } from &#39;vue&#39;
export default {
  setup () {
    const countRef = ref(200)
 
    const render = () => {
      return <p>DEMO1--{countRef.value}</p> // jsx就是js语法，所以要加 .value
    }
    return render
  }
}
</script>

1.2 .jsx file format

// 父组件
 
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
 
export default defineComponent(() => { // 传入 setup 函数
  const countRef = ref(300)
 
  const render = () => {
    return <>
      <p>DEMO2--{countRef.value}</p>
      <JSXChild a={countRef.value + 100}></JSXChild>
    </>
  }
  return render 
})
 
// 子组件 JSXChild.jsx
 
import { defineComponent } from &#39;vue&#39;
 
export default defineComponent({ // 传入组件配置
  props: [&#39;a&#39;],
  setup (props) {
    const render = () => {
      return <>
        <p>child {props.a}</p>
      </>
    }
    return render
  }
})

2. The difference between JSX and template

• There is a big difference in syntax:

• JSX is essentially js code, and you can use any ability of js

• template can only embed simple js expressions, other instructions are required, such as v-if

• JSX has become an ES specification, and template is still Vue’s own The specifications

• are essentially the same:

• will be compiled into js code (render function)

2.1 Interpolation

• template uses double brackets {{ }}

• jsx uses Single brackets { }

// template
 
<template>
  <p>{{ name }} -- {{ age }}</p>
</template>
 
// jsx
 
const render = () => {
    return <>
        <p>child {props.a}</p>
    </>
}

2.2 Custom component

• template When using the component name, you can change the case or the Camel case, jsx cannot be changed

• Introduces dynamic parameters, template uses colon parameter name (:msg='msg'), jsx does not require colon

// template
 
<template>
  <div class="home">
    <watch-effect :msg="msgRef"/>
  </div>
</template>
 
<script>
import { ref } from &#39;vue&#39;
import WatchEffect from &#39;@/components/WatchEffect.vue&#39;
export default {
  name: &#39;HomeView&#39;,
  components: {
    WatchEffect,
  },
  setup () {
    const msgRef = ref(&#39;123&#39;)
    return {
        msgRef
    }
  }
}
</script>
 
// jsx 组件名称不可变，要和引入名字保持一致
 
import { defineComponent, ref } from &#39;vue&#39;
import JSXChild from &#39;./JSXChild.jsx&#39;
 
export default defineComponent(() => {
  const countRef = ref(300)
 
  const render = () => {
    return <>
      <p>DEMO2--{countRef.value}</p>
      <JSXChild a={countRef.value + 100}></JSXChild>
    </>
  }
  return render
})

2.3 Properties and events

template differentiates between properties and events, jsx does not differentiate

// jsx 属性和事件的写法一样
 
import { defineComponent, ref } from 'vue'
import JSXChild from './JSXChild.jsx'
 
export default defineComponent(() => {
  const countRef = ref(300)
 
  function onChange () {
    console.log('onChange')
  }
  const render = () => {
    return <>
      <p>DEMO2--{countRef.value}</p>
      <JSXChild a={countRef.value + 100} change={onChange}></JSXChild>
    </>
  }
  return render
})

2.4 Conditions and loops

Conditional template uses the v-if instruction , jsx uses && in expressions (similar to if( a && b))

// template v-if
 
<template>
  <p v-if="flagRef">template demo</p>
  <button @click="changeFlagRef">click</button>
</template>
<script>
import { ref } from &#39;vue&#39;
export default {
  setup () {
    const flagRef = ref(true)
 
    function changeFlagRef () {
      flagRef.value = !flagRef.value
    }
 
    return {
      flagRef,
      changeFlagRef
    }
  }
}
</script>
 
// jsx &&符号判断
 
import { defineComponent, ref } from &#39;vue&#39;
import JSXChild from &#39;./JSXChild.jsx&#39;
 
export default defineComponent(() => {
  const flagRef = ref(true)
 
  function changeFlagRef () {
    flagRef.value = !flagRef.value
  }
 
  const render = () => {
    return <>
      <p onClick={changeFlagRef}>DEMO2--{flagRef.value.toString()}</p>
      {flagRef.value && <JSXChild a={flagRef.value}></JSXChild>}
    </>
  }
  return render
})

The loop template uses the v-for instruction, jsx uses the .map function of the array

// template v-for
 
<template>
  <ul>
    <li v-for="item in state.list" :key="item">{{ item }}</li>
  </ul>
</template>
<script>
import { reactive } from &#39;vue&#39;
export default {
  setup () {
    const state = reactive({
      list: [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
    })
 
    return {
      state
    }
  }
}
</script>
 
// jsx 数组 .map 函数
 
import { defineComponent, reactive } from &#39;vue&#39;
 
export default defineComponent(() => {
  const state = reactive({
    list: [&#39;a1&#39;, &#39;b1&#39;, &#39;c1&#39;]
  })
 
  const render = () => {
    return <>
      <ul>
        {state.list.map(item => <li>{item}</li>)}
      </ul>
    </>
  }
  return render
})

3. JSX and slot (experience the superiority of JSX)

• slot is a concept invented by Vue. In order to improve the ability of template

• slot has always been The "nightmare" of Vue beginners, especially: scope slot

• But using JSX will be easy to understand, because JSX is essentially js

The above is the detailed content of How to use JSX with Vue3?. For more information, please follow other related articles on the PHP Chinese website!