Vue3 使用 jsx

使用 .jsx 格式文件 和 defineComponent

引用自定义组件，传递属性

基本使用

 child.jsx  组件的配置

demo.jsx   setup 函数

父组件引用

import demo from './components/demo.jsx'

JSX 和 template 语法的区别

JSX 本质就是 js 代码，可以使用 js 的任何能力

template 只能嵌入简单的 js 表达式，其他需要指令， 如 v-if

JSX 已经成为 ES 规范，template 还是 Vue 自家规范

JSX 和 template 本质相同，都会被编译为 js 代码 （render 函数）

使用 JSX 实现 slot

使用 JSX 实现 作用域插槽

父组件

 子组件

属性和事件

defineProps

defineEmits

defineExpose

暴露数据给父组件

子组件

 

父组件

 

1