如何在vue3中使用jsx语法

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空节点
    {age.value}  //无自定义参数，不需要()
    inc('test')}>{age.value}  //有参数，需要()=>包裹
    //withModifiers包裹vue修饰符
    {age.value} //也可以再inc函数中使用e.stopPropagation()等
     {     //键盘事件enter事件 
        //逻辑部分也可以写入js
        if (ev.key === 'Enter') {
           inc ();
        }
     }}> 
  
 )
}

//tempalte 写法
  
     {{age}}
     {{age}}
     {{age}}  //stop修饰符
     {{age}}  //键盘事件enter事件
  

四丶 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 ()=>
   (
      //Dom标签的ref引用
        {age.value}   //ref()双向绑定变量
     
   ) 
}

//tempalte 写法
  
       //Dom标签的ref,使用同名字符串
        {{age}}   //ref()双向绑定变量,不需要.value
     
  

五丶 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 ()=>
   (
        
       //v-model带修饰,推荐(v-model:修饰符)
       //v-model带修饰 (新版不推荐)

     //多个v-model
       
     
   ) 
}

//tempalte 写法
  
     
       //v-model带修饰
     
  

六丶 v-slots语法

jsx中使用 v-slots 代替 v-slot （简写#）

用例：

//jsx 写法
//方法一
const App = {
  setup() {
    const slots = {
      default: () => 
A
,     //默认插槽
      bar: () => B,       //具名插槽
    };
    return () => ;
  },
};
//方法二
const App = {
  setup() {
    return () => (
      <>
        
          {{
            default: () => 
A
,   //此方法 默认default不能少
            bar: () => B,   //具名插槽
          }}
        
        {() => "foo"}
      
    );
  },
};

//tempalte 写法
 
     //具名插槽，也叫 #bar
     
   
   
     
   
 

七丶 v-for语法

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

用例：

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

//tempalte 写法
  
     {{item.label}} 
  

八丶 v-if语法

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

用例：

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

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

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

//tempalte 写法
  
     test vif 
     test velse 
  

九丶 v-show语法

用例：

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

//tempalte 写法
  
     test vshow  
  

十丶 指令的修饰符用法

指令使用下划线,比如v-loading
用例：

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

//tempalte 写法
  
     loading  
  

以上就是“如何在vue3中使用jsx语法”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注创新互联行业资讯频道。