Bagaimana untuk menggunakan JSX dengan Vue3?

1 Aplikasi asas JSX dalam Vue3

• Gunakan fail format .jsx dan defineComponent

• defineComponent boleh lulus dalam fungsi persediaan atau konfigurasi komponen

• Gunakan kurungan tunggal untuk interpolasi {}

1.1 Gunakan jsx dalam fail .vue

// 父
 
<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>

format fail 1.2 .jsx

// 父组件
 
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 Perbezaan antara JSX dan templat

• Terdapat perbezaan besar dalam sintaks:

• JSX pada asasnya ialah kod js, dan anda boleh menggunakan sebarang keupayaan daripada js

• templat hanya boleh membenamkan ungkapan js yang mudah, arahan lain diperlukan, seperti v-if

• JSX telah menjadi spesifikasi ES , dan templat masih milik Vue sendiri. Spesifikasi

• pada asasnya adalah sama:

• akan dikompilasi ke dalam kod js (fungsi render)

2.1 Interpolasi

• templat menggunakan kurungan berganda {{ }}

• jsx menggunakan kurungan Tunggal { }

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

2.2 Komponen tersuai

• templat Apabila menggunakan nama komponen, anda boleh menukar kes atau kes Camel, jsx tidak boleh ditukar

• memperkenalkan parameter dinamik, templat menggunakan titik bertindih + nama parameter (:msg='msg'), jsx tidak tidak memerlukan titik bertindih

// 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 Sifat dan peristiwa

template membezakan kaedah penulisan sifat dan peristiwa, jsx tidak membezakan

// 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 Syarat dan gelung

Templat bersyarat menggunakan Arahan v-if, jsx menggunakan && (serupa dengan if( a && b)) dalam ungkapan

// 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
})

Templat gelung menggunakan arahan v-untuk, jsx menggunakan fungsi .map 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 dan slot (rasai kelebihan JSX)

• slot ialah konsep yang dicipta oleh Vue, dalam untuk meningkatkan keupayaan templat

• slot sentiasa menjadi "mimpi ngeri" untuk pemula Vue, terutamanya: slot skop

• tetapi ia akan mudah difahami menggunakan JSX, kerana JSX pada asasnya adalah js

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JSX dengan Vue3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!