前言,jsx用来解决一些动态的内容,或者条件判断比较麻烦的内容,定制内容会比较方便一些,但是很多人知道有这么个玩意,但是不知道咋用,我最近正好在研究,就写出来大家一起分享一下.(编译需要babel jsx的那个插件官网有例子可以看)
jsx的好处 Vnode可以写在任何地方 可以通过函数来表达,做判断,做逻辑分区,功能分区等等
jsx的坏处 vue所有的事件修饰符都得自己手动实现 不能通过.xxx实现了
1.js里面写的dom 都是VNode 格式大概就是这样的 1-1 VNode的声明
//这样就声明了一段Vnode 在jsx里面渲染的 都是Vnode 或者是单纯的string,number 如果要渲染Object
//需要把对象给toString才能渲染
const a = <div>1</div>
1-2 Vnode传参(v2和v3有区别)
//这个是v3的写法
import { defineComponent, resolveComponent, ref, h } from "vue";
import child from "./child.vue";
export default defineComponent({
name: "test",
components: {
child
},
setup() {
const testModel = ref("")
//直接在花括号里面传就完事
const a = <child {...{
modelValue: "",
a:2,
onClick:()=>{console.log(111)}
}}></child>
//string 可以直接=号赋值 其他类型都要用花括号包起来代表变量
const b = <child
a={2}
c="3"
modelValue={testModel.value}
onClick={()=>{console.log(1111)}}>
</child>
//vue3特殊的update方法
//因为vue3取消了.sync 可以写错v-model:xxx 这样的写法
//所以手动实现一个双向绑定需要麻烦一点
const c= <child
modelValue={testModel.value}
{...{
'onUpdate:modelValue':(v:string)=>{
//手动实现双向绑定需要自己监听方法来实现
//babel插件有例子可以实现 v-model=[] 这样子 百度搜一下就好
//如果是别的什么show啊 都一样 onUpdate:xxx的事件 自己监听就好
test.value=v
}
}}
>
</child>
return () => <div class="test"></div>;
},
});
下面是vue2的组件传值
import child from "./child.vue";
export default {
name: 'test',
components: {
child
},
data(){
return {
testModel:""
}
},
render() {
//这种方法不加props 组件收不到props
const a =<child {...{props:{value:"111"}}></child>
//这个是一样的
const b =<child value={111}></child>
//双向绑定可以用插件 可以手动实现 v2的v-model只有一个input事件
const c =<child value={this.testModel} onInput={(v)=>this.testModel=v}></child>
//render函数里面必须return 不然页面没东西
return (
<div class="test"></div>
)
}
}
1-3 循环生成模板 v2 v3都是一样的
const testArr = [1,2,3]
//花括号里面是变量 每一个VNode都是唯一的 不能重复
const a = <div>{testArr.map(v=>{return <span>{v}</span>})}</div>
//循环绑定v-model
const b = <div>{testArr.map(v=>{
return <child value={v}
//这样绑定以后 数组里面的值就会被改变
//v2这个数据就写在data里面 v3就用ref包一层 同时加上.value
onInput={(value)=>v=value}>
</child>})}
</div>
1-4 v-if
//这个语法是不对 我只是距离子 如果你是写业务的话
//v2写在data里面 v3用ref包一层
let isShow = true
const a = <div onClick={()=>isShow=false}>点击b消失</div>
//必须得有一个元素包裹 不能 直接写变量 或者两个VNode写一排 都会报错 但是可以用<></>来包裹 代表啥都不是
const b = <>
{isShow?<div>我是b元素</div>:""
</>
1-5 插槽的定义和使用(v2,v3有区别的)const slots = useSlots()
//vue2插槽的定义
const a = <div><slot></slot></div>
//父组件调用
const b = <a>1</a>
//vue2 具名插槽的定义
const a = <div><slot name="a" data={a:"1",b:"2"}></slot></div>
//下面这种方法也是可以的 复杂情况可以用函数返回值来做 会更加方便维护
//这种方法传参我不会 一会儿给后面加个括号试试
const a = <div>
{this.$slot.name?this.$slot.name:""}
</div>
//父组件调用
const scopedSlots = {
name:v=>{
console.log(v)//{a:"1",b:"2"}
}
}
//如果你直接在标签写 scope-slots 会不认识 因为 需要插件支持 默认是不行的
const b = <a scopedSlots={scopedSlots}>1</a>
//vue3的插槽定义
const a = <div><slot></slot></div>
//父组件调用
const b = <a>1</a>
//vue3的具名插槽
const a = <div><slot name="a" data={a:"1",b:"2"}></slot></div>
//父组件调用
const scopedSlots = {
name:v=>{
console.log(v)//{a:"1",b:"2"}
}
}
//vue3变成了这样 直接v-slot就可以
const b = <a v-slot={scopedSlots}>1</a>
//vue3 steup的调用
import { useSlots, useAttrs } from 'vue'
//这个里面就有全部的插槽内容
const slots = useSlots()//等于 this.$slots
对于jsx还有啥需要了解的,我们可以一起探讨一下,学习一下. 或者还需要 别的的例子也可以留言告诉我,我到时候来更新. 这个东西可以看看然后无缝接react react也是这一套 大差不差
