vuejsx

// Vue JSX 示例代码

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import { defineComponent, h } from 'vue';

// 定义一个简单的子组件
const MyComponent = {
  render() {
    return (
      <div class="my-component">
        <h1>Hello, JSX in Vue!</h1>
        <button onClick={() => alert('Button clicked!')}>Click me</button>
      </div>
    );
  }
};

export default defineComponent({
  name: 'App',
  components: {
    MyComponent
  },
  render() {
    return (
      <div id="app">
        <MyComponent />
      </div>
    );
  }
});
</script>

<style scoped>
.my-component {
  color: blue;
}
</style>

解释说明

1. 引入 Vue 和 h 函数:

   • import { defineComponent, h } from 'vue'; 引入了 Vue 的 defineComponent 和 h 函数，h 函数用于创建虚拟 DOM 节点。

2. 定义子组件 MyComponent:

   • 使用 render 方法来定义组件的渲染逻辑。
   • 在 render 方法中使用 JSX 语法创建组件结构。例如 <div class="my-component">...</div>。

3. 事件处理:

   • 使用 onClick={() => alert('Button clicked!')} 来绑定点击事件，当按钮被点击时会弹出提示框。

4. 父组件 App:

   • 父组件 App 使用 defineComponent 定义，并在 components 中注册了 MyComponent。
   • 父组件的 render 方法返回了一个包含 MyComponent 的 div 结构。

5. 样式:

   • 使用 <style scoped> 来定义局部样式，只影响当前组件。

通过这种方式，你可以在 Vue 中使用 JSX 语法来编写组件，使代码更具灵活性和可读性。