VUE的JSX学习

介绍

JSX 是 JavaScript 的一个类似 XML 的扩展，在 JSX 表达式中，使用大括号来嵌入动态值 默认情况下，vue3 + vite 项目不支持 jsx, 需要安装插件 @vitejs/plugin-vue-jsx

1.安装

`npm i @vitejs/plugin-vue-jsx -D`

2.配置

import vue from '@vitejs/plugin-vue'
import Jsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
    plugins: [
        vue(),
        Jsx()
    ]
})

3.使用

例如：在一个 jsx 文件中使用

import { defineComponent } from 'vue'

export default defineComponent({
    inheritAttrs: false // 禁用属性继承, 否则非Prop的属性会被添加被绑定组件的根元素上
    name: MyDiv
    props: [],
    emits: [],
    setup (props, { emit, slots, attrs }) {
        return (
            <div>这是一个 div 元素<div>
        )
    }
})

实际使用

1.v-for

const divList = (
    <div>
        { list.map(item => <span key={ item.id }>{ item.text }</span>) }
    </div>
)

2.v-on

以 on 开头，等价于 @ + 事件，例如 onClick、onChange

对于需要修饰符的事件，需要使用驼峰写法将他们拼接在事件名后面，例如 onClickCapture

const button = (
    <button onClick={event => {}}>按钮</button>
)

3.设置插槽

可以通过 setup 中的 slots 对象进行插槽的渲染 插槽分类:

• 默认插槽
• 具名插槽
• 作用域插槽

// 默认插槽
<div>{slots.default()}</div>

// 具名插槽 + 作用域插槽
<div>{slots.footer({ text: props.message })}</div>

4.传递插槽

我们需要传递一个插槽函数或者是一个包含插槽函数的对象而非是数组，插槽函数的返回值同一个正常的渲染函数的返回值一样——并且在子组件中被访问时总是会被转化为一个 vnodes 数组。

插槽以函数的形式传递使得它们可以被子组件懒调用。这能确保它被注册为子组件的依赖关系，而不是父组件。这使得更新更加准确及有效。

// 单个默认插槽
<MyComponent>{() => 'hello'}</MyComponent>

// 具名插槽
// 外层花括号为格式，内层为传递的插槽集合对象
<MyComponent>
    {{
      default: () => 'default slot',
      foo: () => <div>foo</div>,
      bar: () => [<span>one</span>, <span>two</span>]
    }}
</MyComponent>