Vue3에서 JSX를 어떻게 사용하나요?

1 Vue3에서 JSX의 기본 애플리케이션은

• .jsx 형식 파일을 사용하며 defineComponent

• defineComponent는 설정 함수 또는 구성 요소 구성에 전달될 수 있습니다.

• 괄호 for value ​​ {}

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 '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 JSX와 템플릿의 차이점

• 큰 차이가 있습니다. 구문:

• JSX는 기본적으로 js 코드이므로 js

• 의 모든 기능을 사용할 수 있습니다. 템플릿은 간단한 js 표현식만 포함할 수 있으며 v-if

• JSX와 같은 다른 지침이 필요합니다. ES 사양 및 템플릿은 여전히 ​​VUE 자체 사양입니다.

• 는 본질적으로 동일합니다. 이중 괄호 사용 {{ }}

jsx는 단일 괄호 사용 { }

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

• 2.2 사용자 정의 구성 요소

• 템플릿 구성 요소 이름은 대소문자 또는 낙타 대소문자로 변경 가능, jsx는 변경할 수 없음

동적 매개변수 도입, 템플릿은 콜론+매개변수 이름(: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 속성 및 이벤트
  템플릿은 속성과 이벤트의 작성 방법을 구별합니다. jsx는 구분하지 않습니다

// 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 조건과 루프
  조건부 템플릿은 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
})

루프 템플릿은 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 및 슬롯(JSX 장점 경험)

슬롯은 템플릿의 기능을 향상시키기 위해 Vue에서 발명한 개념입니다.

슬롯은 항상 "악몽"이었습니다. Vue 초보자, 특히: 스코프 슬롯

하지만 JSX를 사용하는 것은 매우 어려울 것입니다. JSX는 기본적으로 js
이므로 이해하기 쉽습니다.

위 내용은 Vue3에서 JSX를 어떻게 사용하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!