怎么在vue3中使用jsx语法

时间：2023-05-12 21:08

背景

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

语法

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

一丶普通内容

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

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

二丶动态变量

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

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

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

三丶函数事件

1.基本用法

jsx和tempalte的函数区别如下：

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

用例1：

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

2.参数进阶

jsx和 tempalte都一样：无自定义参数的函数不需要带()结尾
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>  //有参数，需要()=>包裹    //withModifiers包裹vue修饰符    <div onClick={withModifiers(inc, ["stop"])}>{age.value}</div> //也可以再inc函数中使用e.stopPropagation()等    <input onKeyup=={(ev) => {     //键盘事件enter事件         //逻辑部分也可以写入js        if (ev.key === 'Enter') {           inc ();        }     }}></input >   </> )}//tempalte 写法  <tempalte>     <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(null)变量，不需要加.value，tempalte则是用同名字符串

用例：

//jsx 写法setup() {  const divRef=ref(null);  const age= ref(0);    return ()=>   (     <div ref={divRef} > //Dom标签的ref引用        <span>{age.value}</span>   //ref()双向绑定变量     </div>   ) }//tempalte 写法  <tempalte>     <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} />        <tz-input v-model:foo={age} />  //v-model带修饰,推荐(v-model:修饰符)     <tz-input v-model={[age, "foo"]} />  //v-model带修饰 (新版不推荐)     //多个v-model     <tz-input    //推荐(v-model:修饰符)       v-model:foo={age}       v-model:bar={gender}     />       <tz-input          v-models={[          //使用v-models,传递二维数组 (新版不推荐)                   [age, "foo"],          [gender, "bar"],         ]}     />   ) }//tempalte 写法  <tempalte>     <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() {    const slots = {      default: () => <div>A</div>,     //默认插槽      bar: () => <span>B</span>,       //具名插槽    };    return () => <A v-slots={slots} />;  },};//方法二const App = {  setup() {    return () => (      <>        <A>          {{            default: () => <div>A</div>,   //此方法 默认default不能少            bar: () => <span>B</span>,   //具名插槽          }}        </A>        <B>{() => "foo"}</B>      </>    );  },};//tempalte 写法 <tempalte>   <tempalte v-slot:bar>  //具名插槽，也叫 #bar     <A />   </template>   <tempalte v-slot:default>     <A />   </template> </template>

七丶 v-for语法

jsx中可使用js中的map循环来实现tempalte的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> ) }     </>    ) }//tempalte 写法  <tempalte>     <span v-for="item in arr" :key="item.label">{{item.label}}</span>   </template>

八丶 v-if语法

jsx中可使用js中的if逻辑，三目运算，&&，|| 等来实现tempalte的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条件函数     </>    ) }//tempalte 写法  <tempalte>     <span v-if="show">test vif</span>      <span v-else>test velse</span>   </template>

九丶 v-show语法

用例：

//jsx 写法setup() {  const show= ref(false);        return ()=>(        <>      <span v-show={show.value}> test vshow</span>    //v-show     </>    ) }//tempalte 写法  <tempalte>    <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>         </>    ) }//tempalte 写法  <tempalte>    <span v-loading.fullscreen.lock="isLoading"> loading </span>   </template>

以上就是怎么在vue3中使用jsx语法的详细内容，更多请关注Gxl网其它相关文章！