jsx指南

vue3 项目中 使用composition-api配合hooks形式，按业务分离，逻辑更清晰，维护更方便；

由于template 模板语法受 vue 文件格式限制，在hooks 函数中需要 return 太多变量，维护麻烦;

使用在hooks 文件里面使用 jsx 代替 template就可以解决这类问题。

也可以参考 我当年的原文 vue3 中使用 jsx

语法

TIP

下面主要通过对比 jsx 和 template 不同语法，来实现同样的功能

一丶 普通内容

普通内容常量，写法是一样的

//jsx 写法
setup() {
  return ()=><p type="email">hello</p>
}

//template 写法
  <template>
     <p type="email">hello</p>
  </template>

---

二丶 动态变量

动态变量区别

• jsx 统一使用大括号包裹变量，没有引号，比如 <div age={age}>{age}</div>
• template 内容使用双大括号包裹，属性变量使用冒号开头 如 <div :age="age"></div>

{} 是 jsx 的万能的用法，里面可以写js 的表达式，循环逻辑操作等等

//jsx 写法
setup() {
  let age = 1
  return ()=><div age={age}>{age}</div> //没有" "包裹，统一都是{}
}

//template 写法
  <template>
     <div :age="age">{{age}}</div>
  </template>

---

三丶 函数事件

1.基本用法

提示

jsx和template的函数区别如下：

• jsx使用on+大驼峰形式(首字母大写)，template使用 @+短横线 形式
• jsx方法名需要使用 {} 包裹起来，template使用 " " 包裹起来

用例 1：

//jsx 写法
setup() {
  const age= ref(0);
  let inc = ()=>{
      age.value++
   }
  return ()=> <div onClick={inc}>{age.value}</div>
}

//template 写法
  <template>
     <div @click="inc">{{age}}</div>
  </template>

---

2.参数进阶

WARNING

• jsx和 template都一样：无自定义参数的函数不需要带()结尾
• jsx在使用带参数的函数，则需要使用箭头函数包裹 ： {()=>fn(args)}
• jsx的修饰符可以使用用_代理.(不一定都有用), 否则需要借助withModifiers，实现.self ,.stop等修饰符的效果,

用例 2：

//jsx 写法
import { withModifiers} from "vue";
...
setup() {
  const age= ref(0);
  let inc = ()=>{
      age.value++
   }
  return ()=> (
  <>
    //根 路径必须有节点，或者用<>代表fragment空节点
    <div onClick={inc}>{age.value}</div>  //无自定义参数，不需要()
    <div onClick={()=>inc('test')}>{age.value}</div>  //有参数，需要`()=>`包裹
    <div onClick={withModifiers(inc, ["stop"])}>{age.value}</div> //withModifiers包裹vue修饰符
    <input onKeyup=={(ev) => {     //键盘事件enter事件
        //逻辑部分也可以写入js
        if (ev.key === 'Enter') {
           inc ();
        }
     }}>
     </input >
  </>
 )
}

//template 写法
  <template>
     <div @click="inc">{{age}}</div>
     <div @click="inc('test')">{{age}}</div>
     <div @click.stop="inc">{{age}}</div>  //stop修饰符
     <input @keyup.enter="inc">{{age}}</input>  //键盘事件enter事件
  </template>

---

四丶 ref 绑定

vue3 中 有两种 ref,

• 一种是指的ref()定义的双向绑定变量，

• 另外则是 绑定在Dom 标签的 ref 引用

  提示

• 对于ref()双向绑定变量，jsx 不会向template自动处理.value问题，需要手动加 value

• 对于Dom 标签的 ref 引用，jsx 是直接用ref()变量，不需要加.value，template则是用同名字符串 :::

用例：

//jsx 写法
setup() {
  const divRef=ref(null);
  const age= ref(0);
  return ()=>
   (
     <div ref={divRef} >  //Dom标签的ref引用
        <span>{age.value}</span>   //ref()双向绑定变量
     </div>
   )
}

//template 写法
  <template>
     <div ref='divRef'>  //Dom标签的ref,使用同名字符串
        <span>{{age}}</span>   //ref()双向绑定变量,不需要.value
     </div>
  </template>

---

五丶 v-model 语法

jsx 中使用v-model 或 v-models代替template的v-model

提示

组件只有一个 v-model时，使用 v-model 语法组件只有
多个 v-model时，可以使用 v-model:xx语法
多个 v-model时 也可以 v-models 语法,需传递一个二维数组(新版已经不推荐)

用例：

//jsx 写法
setup() {
  const age= ref(0);
  const gender =ref('')
  return ()=>
   (
     <tz-input v-model={age.value} ref={gender} />  //gender 不需要加.value
     <tz-input v-model:foo={age.value} />  //v-model带修饰,推荐(v-model:修饰符)
     <tz-input v-model={[age.value, "foo"]} />  //v-model带修饰 (新版不推荐)

     //多个v-model
     <tz-input    //推荐(v-model:修饰符)
       v-model:foo={age.value}
       v-model:bar={gender.value}
     />
     <tz-input
       v-models={[          //使用v-models,传递二维数组 (新版不推荐)
         [age, "foo"],
         [gender, "bar"],
         ]}
     />
   )
}

//template 写法
  <template>
     <tz-input v-model="age" />
     <tz-input v-model.foo="age" />  //v-model带修饰
     <tz-input
       v-model.foo="age"     //多个v-model
       v-model.bar="gender"
     />
  </template>

---

六丶 v-slots 语法

jsx 中使用 v-slots 代替 v-slot （简写#）,或者用直接 \{\{ }} 双括号

用例：

//jsx 写法

//方法一{{}}

const App = {
  setup() {
    return () => (
      <>
        <A>

          {{
            default: () => <div>A</div>,
            bar: () => <span>B</span>, //具名插槽
          }}

        </A>
        <B>{() => 'foo'}</B>
      </>
    )
  },
}
//方法二
const App = {
  setup() {
    const slots = {
      default: () => <div>A</div>, //默认插槽
      bar: () => <span>B</span>, //具名插槽
    }
    return () => <A v-slots={slots} />
  },
}

//template 写法
<template>
  <template v-slot:bar>
    {' '}
    //具名插槽，也叫#bar
    <A />
  </template>
  <template v-slot:default>
    <A />
  </template>
</template>

---

七丶 v-for 语法

jsx中可使用 js 中的map 循环来实现
template 的 v-for逻辑

用例：

//jsx 写法
setup() {
  const arr= ref([{label:'1'},{label:'2'},{label:'3'}]);
  return ()=>(
     <>
     { arr.value.map(item=> <span key={item.label}>{item.label}</span> ) }
     </>
    )
}

//template 写法
  <template>
     <span v-for="item in arr" :key="item.label">{{item.label}}</span>
  </template>

---

八丶 v-if 语法

jsx中可使用 js 中的if 逻辑，三目运算，&&，|| 等来实现
template 的 v-if逻辑

用例：

//jsx 写法
setup() {
  const show= ref(false);
  return ()=>(
     <>
     {show && <span>test vif</span>}      //使用&&运算
     {!show && <span>test velse</span>}
     </>
    )
}

setup() {
  const show= ref(false);
  return ()=>(
     <>
      <span>{show.value ? 'test vif' : 'test velse'}</span>    //三目运算
     </>
    )
}

setup() {
  const show= ref(false);
  const vif=()=>{
     if(show) {
        return  <span>test vif</span>
     }
     return  <span>test velse</span>
  }
  return ()=>(
     <>
        vif()   //if条件函数
     </>
    )
}

//template 写法
  <template>
     <span v-if="show">test vif</span>
     <span v-else>test velse</span>
  </template>

---

九丶 v-show 语法

jsx 与 template得v-show语法是一样的

用例：

//jsx 写法
setup() {
  const show= ref(false);
  return ()=>(
     <>
      <span v-show={show.value}> test vshow</span>    //v-show
     </>
    )
}

//template 写法
  <template>
    <span v-show="show"> test vshow </span>
  </template>

---

十丶 v-loading 指令的修饰符用法

用例：

//jsx 写法
setup() {
  const isLoading= ref(true);
  return ()=>(
     <>
      <span v-loading_fullscreen_lock={isLoading}> loading </span>
     </>
    )
}

//template 写法
  <template>
    <span v-loading.fullscreen.lock="isLoading"> loading </span>
  </template>

---