Vue3-JSX的使用

• 可以使用.jsx格式定义文件
• 自定义组件，传递属性

parent.jsx

import { defineComponent, ref } from 'vue';
import Child from './Child';
/**
 * defineComponent()  两种方式
 * 第一种 defineComponent(()=>{}) setup函数 
 * 第二种 defineComponent({  // 组件配置
 *      name:"",
 *      props:[],
 *      setup(){}
 * }) 
 */

export default defineComponent(() => {
    const countRef = ref(300)
    return () =>{
        return <>
            <div>demo jsx {countRef.value}</div>
            <Child a = {"传值"} />
        </>
    }
})

child.jsx

import { defineComponent } from "vue";

export default defineComponent({
  props: ["a"],
  setup(props) {
    return () => {
      return <div> Child jsx {props.a}</div>;
    };
  },
});