Vue3 和 JSX -基本使用

JSX 是 React 提出的概念

• 使用 .jsx 格式文件和 defineComponent
• 引入自定义组件，传递属性

两种使用方法，第一种 JsxDemo.vue

<script>
import {ref} from "vue";

export default {
  name: "JsxDemo",
  setup() {
    const countRef = ref(100)
    const render = () => {
      return <p>Jsx Demo {countRef.value}</p>
    }
    // 必须返回一个函数
    return render
  }
}
</script>

第二种 JsxDemo.jsx，需要引入 defineComponent 方法，可以接收两种格式

• setup 函数
• 组件的配置

先加一个子组件 JsxChild.jsx

import {defineComponent} from "vue"

export default defineComponent({
  name: "JsxChild",
  props: ['a'],
  setup(props) {
    const render = () => {
      return <p>Child {props.a}</p>
    }
    return render
  }
})

在 .jsx 引入子组件

import {defineComponent, ref} from "vue"
import Child from "./JsxChild.jsx";

// defineComponent 可以传入两种
// 1. setup 函数
export default defineComponent(() => {
  const countRef = ref(101)
  const render = () => {
    return <>
      <p>Jsx Demo {countRef.value}</p>
      <Child a={countRef.value + 100}></Child>
    </>
  }
  // 必须返回一个函数
  return render
})

// 2. 组件的配置
// export default defineComponent({
//   name: "JsxDemo",
//   props: ['a', 'b'],
//   setup() {
//   }
// })

两种方式引入方法都一样，只是需要加后缀名，比如 import JsxDemo from "@/components/JsxDemo.jsx" 如果使用 typescript 就是 .tsx 文件后缀