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 文件后缀

Vue3 和 JSX -基本使用 ​

Vue3 和 JSX -基本使用