JavaScript文件中使用JSX的方法步骤

npm install @vue/babel-plugin-jsx -D

yarn add @vue/babel-plugin-jsx -D

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '@vue/babel-plugin-jsx'
  ]
}

// HelloWorld.js
import { defineComponent } from 'vue'

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props) {
    return () => (
      <div class="hello">
        <h1>{props.msg}</h1>
        <button onClick={() => console.log('clicked')}>Click me</button>
      </div>
    )
  }
})

<template> 标签	直接在 JS 中写 JSX
v-if	{condition && <div/>}
v-for	{items.map(item => <div key={item.id}>{item.name}</div>)}
v-bind 或 :	直接使用属性 name={value}
v-on 或 @	onClick={handler}
v-model	value={state} onChange={handler}

// Counter.js
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup() {
    const count = ref(0)
    
    const increment = () => {
      count.value++
    }
    
    return () => (
      <div>
        <p>Count: {count.value}</p>
        <button onClick={increment}>Increment</button>
      </div>
    )
  }
})

// ParentComponent.js
import { defineComponent } from 'vue'
import ChildComponent from './ChildComponent'

export default defineComponent({
  setup() {
    const items = ['Apple', 'Banana', 'Orange']
    
    return () => (
      <div>
        <h1>Fruit List</h1>
        <ul>
          {items.map(item => (
            <ChildComponent item={item} key={item} />
          ))}
        </ul>
      </div>
    )
  }
})

// 使用对象语法
<div style={{ color: 'red', fontSize: '14px' }}></div>

// 使用 class
<div class={['foo', { active: isActive }]}></div>
​​插槽​​：
// 默认插槽
<Child>{() => '默认插槽内容'}</Child>

// 具名插槽
<Child>
  {{
    default: () => '默认内容',
    header: () => <h1>标题</h1>
  }}
</Child>

// Hello.tsx
import { defineComponent, PropType } from 'vue'

interface User {
  name: string
  age: number
}

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true
    }
  },
  setup(props) {
    return () => (
      <div>
        <p>Name: {props.user.name}</p>
        <p>Age: {props.user.age}</p>
      </div>
    )
  }
})

import { h } from 'vue'

export default {
  props: ['message'],
  render() {
    return h('div', this.message)
  }
}

// SimpleComponent.js
import { h } from 'vue'

export default {
  name: 'SimpleComponent',
  props: {
    title: String,
    count: Number
  },
  render() {
    return h('div', [
      h('h1', this.title),
      h('p', `Count: ${this.count}`),
      h('button', {
        onClick: () => this.$emit('increment')
      }, 'Add')
    ])
  }
}

// Counter.js
import { h } from 'vue'

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  render() {
    return h('div', [
      h('p', `Current count: ${this.count}`),
      h('button', {
        onClick: this.increment
      }, 'Increment')
    ])
  }
}

// JsxComponent.js
export default {
  props: ['items'],
  render() {
    return (
      <ul>
        {this.items.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    )
  }
}

v-if="condition"	condition ? h('div') : null
v-for="item in items"	items.map(item => h('div', item))
v-bind:id="id"	{ id: this.id }
@click="handleClick"	{ onClick: this.handleClick }
v-model="value"	需要手动实现（见下方示例）
实现 v-model
// InputComponent.js
import { h } from 'vue'

export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  render() {
    return h('input', {
      value: this.modelValue,
      onInput: (e) => {
        this.$emit('update:modelValue', e.target.value)
      }
    })
  }
}

// LayoutComponent.js
import { h } from 'vue'

export default {
  render() {
    return h('div', [
      h('header', this.$slots.header()),
      h('main', this.$slots.default()),
      h('footer', this.$slots.footer())
    ])
  }
}

// ScopedSlotComponent.js
import { h } from 'vue'

export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30
      }
    }
  },
  render() {
    return h('div', [
      this.$slots.default({
        user: this.user
      })
    ])
  }
}