Home > Web Front-end > Vue.js > body text

How to use JSX with Vue3?

WBOY
Release: 2023-05-09 21:09:19
forward
2241 people have browsed it

    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>
    Copy after login

    1.2 .jsx file format

    // 父组件
     
    import { defineComponent, ref } from &#39;vue&#39;
    import JSXChild from &#39;./JSXChild.jsx&#39;
     
    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
      }
    })
    Copy after login

    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>
        </>
    }
    Copy after login

    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
    })
    Copy after login

    2.3 Properties and events

    template differentiates between properties and events, jsx does not differentiate
    // jsx 属性和事件的写法一样
     
    import { defineComponent, ref } from &#39;vue&#39;
    import JSXChild from &#39;./JSXChild.jsx&#39;
     
    export default defineComponent(() => {
      const countRef = ref(300)
     
      function onChange () {
        console.log(&#39;onChange&#39;)
      }
      const render = () => {
        return <>
          <p>DEMO2--{countRef.value}</p>
          <JSXChild a={countRef.value + 100} change={onChange}></JSXChild>
        </>
      }
      return render
    })
    Copy after login

    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
    })
    Copy after login
    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
    })
    Copy after login

    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!

    Related labels:
    source:yisu.com
    Statement of this Website
    The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
    Popular Tutorials
    More>
    Latest Downloads
    More>
    Web Effects
    Website Source Code
    Website Materials
    Front End Template