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

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

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

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

• 괄호 for value{}

1.1 .vue 파일에서 jsx 사용

// 父   // JSXDemo1.vue 

1.2 .jsx 파일 형식

// 父组件 import { defineComponent, ref } from 'vue' import JSXChild from './JSXChild.jsx' export default defineComponent(() => { // 传入 setup 函数 const countRef = ref(300) const render = () => { return <> 
DEMO2--{countRef.value}
   } return render }) // 子组件 JSXChild.jsx import { defineComponent } from 'vue' export default defineComponent({ // 传入组件配置 props: ['a'], setup (props) { const render = () => { return <> 
child {props.a}
  } return render } })

2 JSX와 템플릿의 차이점

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

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

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

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

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

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

로그인 후 복사
• 2.2 사용자 정의 구성 요소

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

// template   // jsx 组件名称不可变，要和引入名字保持一致 import { defineComponent, ref } from 'vue' import JSXChild from './JSXChild.jsx' export default defineComponent(() => { const countRef = ref(300) const render = () => { return <> 
DEMO2--{countRef.value}
   } 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 <> 
DEMO2--{countRef.value}
   } return render })

로그인 후 복사
• 2.4 조건과 루프
  조건부 템플릿은 v -if 명령어를 사용하고, jsx는 표현식에서 &&(if( a && b)와 유사)를 사용합니다.

// template v-if   // jsx &&符号判断 import { defineComponent, ref } from 'vue' import JSXChild from './JSXChild.jsx' export default defineComponent(() => { const flagRef = ref(true) function changeFlagRef () { flagRef.value = !flagRef.value } const render = () => { return <> 
DEMO2--{flagRef.value.toString()}
 {flagRef.value && }  } return render })

로그인 후 복사

루프 템플릿은 v-for 명령어를 사용하고, jsx는 배열을 사용합니다. .map 기능

// template v-for   // jsx 数组 .map 函数 import { defineComponent, reactive } from 'vue' export default defineComponent(() => { const state = reactive({ list: ['a1', 'b1', 'c1'] }) const render = () => { return <> 
 {state.list.map(item => 
{item}
)} 
  } return render })

3. JSX 및 슬롯(JSX 장점 경험)

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

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