vue中使用jsx

安装插件

npm i @vitejs/plugin-vue-jsx

vite.config.js

import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
  plugins: [vueJsx()],
})

使用jsx

src/App.jsx

import { defineComponent } from 'vue'
export default defineComponent({
  name:'App',
  setup:(props,ctx) => {
    return () => <div>Hello World</div>;
  }
})

直接输出

const com1 = ()=><div>com1</div>;
const com2 = ()=><div>com2</div>;

export default () =>{ 
  return <div>
    <com1/>
    <com2/>
  </div>
}

插值

import { defineComponent,ref } from 'vue';
export default defineComponent({
  name: 'App',
  setup: (props,ctx)=> {
    const text = ref('hello world')
    return () => <div>222 {text.value} </div>
  }
})

条件渲染和列表

import { defineComponent,ref } from 'vue'
export default defineComponent({
  name: 'App',
  setup:(props,ctx)=>{
    const text = ref('hello world')
    const isShow = ref(true)
    const list = ['one','two','three','four']
    return ()=><div>
      {text.value}
      {isShow.value?<div>yes</div>:<div>no</div>}
      <div v-show={isShow.value}>show</div>
      {list.map((item,index)=>{return <div key={index}>{item}-{index}</div>})}
    </div>
  }
})

事件绑定

import { defineComponent,withModifiers } from "vue"
export default defineComponent({
  name: 'App',
  setup: (props,ctx)=>{
    return () => 
      <div>
        {/* 两种事件绑定 */}
        {/* <div onClick={withModifiers(()=>{
          console.log('点击了1')
        },["self"])}>点击1</div> */}
        {/* 对于 .passive .capture 和 .one 事件修饰符，使用withModifiers并不生效，这里可以采用链式驼峰的形式进行设置 */}
        <div onClickOnce={()=>{console.log('点击了2')}}>点击2</div>
      </div>
  }
})

v-model

// 在当组件中使用自定义时间的时候 和 SFC 就有了区别，比如绑定一个msg，在SFC中直接v-model:msg即可，
// 而在jsx中则需要使用一个数组，例如组件名叫ea_button
// 这个组件发送一个update：changeMsg的方法，父组件的msg变量需要接受update:changeMsg函数传来的参数
// <ea-button v-model:changeMsg="msg"></ea-button>  sfc
// <ea-button v-model={[msg:value,'changeMsg']}></ea-button>   jsx
import { defineComponent,ref } from "vue"
export default defineComponent({
  name: 'App',
  setup:(props,ctx)=>{
    const val = ref(1)
    return ()=><div>
      <input type="text" v-model={val.value} />
      {val.value}
    </div>
  }
})

插槽

// 插槽
import { defineComponent } from "vue"

// 默认插槽
const Child = (props,{slots}) =>{
  return <div>{slots.default()}</div>  
}
// 具名插槽
const lotChild = (props,{slots})=>{
  return (
  <div>
    <div>{slots.slotOne()}</div>
    <div>{slots.slotTwo()}</div>
    <div>{slots.slotThree()}</div>
  </div>
  )
}
// 作用域插槽
const spaceChild = (props,{slots})=>{
  const params = '插槽1'
  return <div>{slots.slotOne(params)}</div>  
}

export default defineComponent({
  name:'App',
  setup:()=>{
    return ()=>(
      <div>
        <Child>默认插槽</Child>
        <lotChild>
          {{
            slotOne: () => <div>slotOne</div>,
            slotTwo: () => <div>slotTwo</div>,
            slotThree: () => <div>slotThree</div>
          }}
        </lotChild>
        <spaceChild>{{slotOne:(params)=><div>{params}</div>}}</spaceChild>
        <div>222</div>
      </div>
    )
  }
})