Comment utiliser JSX avec Vue3 ?

1. L'application de base de JSX dans Vue3

• utilise un fichier au format .jsx et defineComponent

• defineComponent peut être transmise dans la fonction d'installation ou la configuration du composant

• Utilisez des parenthèses simples pour les valeurs {}

1.1 Utilisation de jsx dans les fichiers .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>

1.2 Format de fichier .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 La différence entre JSX et le modèle

• Il y a une grande différence. dans la syntaxe :

• JSX est essentiellement du code js, vous pouvez utiliser n'importe quelle capacité de js

• le modèle ne peut intégrer que des expressions js simples, d'autres instructions sont requises, telles que v-if

• JSX est devenu Une spécification ES et un modèle sont toujours les propres spécifications

• sont essentiellement les mêmes:

• sera compilé en code JS (fonction de rendu)

2.1 utilise des parenthèses doubles {{ }}

• jsx utilise des parenthèses simples { }

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

  2.2 Composants personnalisés

le nom du composant du modèle peut être modifié en cas ou en cas de chameau, jsx ne peut pas être modifié

• Introduit des paramètres dynamiques, le modèle utilise deux points + paramètres Nom (:msg='msg'), jsx ne nécessite pas de deux-points

• // 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 Propriétés et événements

le modèle distingue la méthode d'écriture des propriétés et des événements, jsx le fait ne distingue pas

// 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 et boucles

Le modèle conditionnel utilise l'instruction v -if, jsx utilise && (similaire à if( a && b)) dans les expressions

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

Le modèle de boucle utilise l'instruction v-for, jsx utilise un tableau .map fonction

// 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 et slot (expérimentez les avantages de JSX)

slot est un concept inventé par Vue, afin d'améliorer la capacité du modèle

• slot a toujours été un "cauchemar" pour les débutants de Vue. , notamment : scope slot

• Mais utiliser JSX sera très difficile Facile à comprendre, car JSX est essentiellement js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!