如何在Vue3中使用JSX?

    1. Vue3 JSX 的基本应用

    • 使用 .jsx 格式文件和 defineComponent

    • defineComponent 可传入 setup 函数 或 组件的配置

    • 插值使用单括号 {}

    1.1 在 .vue 文件中使用 jsx

    // 父
     
    <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文件格式

    // 父组件
     
    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
      }
    })

    2. JSX 和 template 的区别

    • 语法上有很大区别

    • JSX 本质就是 js 代码,可以使用 js 的任何能力

    • template 只能嵌入简单的 js 表达式,其他需要指令,如 v-if

    • JSX 已经成为 ES 规范,template 还是 Vue 自家规范

    • 本质是相同的:

    • 都会被编译为 js 代码(render 函数)

    2.1 插值

    • template 使用双括号 {{ }}

    • jsx 使用单括号 { }

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

    2.2 自定义组件

    • template 组件名使用时可改变大小写或是驼峰,jsx 不可更改

    • 引入动态参数,template使用冒号+参数名(:msg='msg'),jsx 不需要冒号

    // 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 属性和事件

    template 区分属性和事件的写法,jsx 不区分
    // 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
    })

    2.4 条件和循环

    条件 template 使用 v-if 指令,jsx 在表达式中使用 && (类似 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
    })
    循环 template 使用 v-for 指令,jsx 使用数组的 .map 函数
    // 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 和 slot (体会 JSX 的优越性)

    • slot 是 Vue 发明的概念,为了完善 template 的能力

    • slot 一直是 Vue 初学者的“噩梦”,特别是:作用域 slot

    • 但使用 JSX 将很容易理解,因为 JSX 本质就是 js

    以上就是如何在Vue3中使用JSX?的详细内容,更多请关注www.sxiaw.com其它相关文章!