背景
环境：vue3 + ts + vite
vue3.0版本的双向数据绑定，是作了一些改动的，v-model其实是变成了，modelValue 与 update:modelValue事件的组合，而在vue.2.x中的是 value与input事件的组合。因此编码时是需要注意的。
模板语法
<template>
<el-input v-model = 'query.name' />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
setup(){
const query = ref<{name:string}>()
query.value = {name:'name'}
return { query }
}
})
</script>
在模板语法与vue2.x的使用方式并没有什么差异的，都是使用v-model指令的。
jsx/tsx中
在vue3.0 tsx中指令是可以使用的，因此可以写成：
<script lang="tsx">
import { defineComponent} from 'vue';
export default defineComponent({
setup(){
const query = ref<{name:string}>()
query.value = {name:'name'}
return ()=>{
return <>
<el-input v-model = {query.name} {
...{
'onUpdate:modelValue'(e){
console.log(e) // 注意第一层 {} 解析时并不认为是对象
}
}
} />
</>
}
}
})
</script>
始终需要注意绑定的值是需要响应式的 ，使用ref或者reactive进行包装的。
h,createVNode函数中
h,createVNode函数可以很方便的做底层的组件，可以更加充分的使用js/ts的完全编程能力。
<script lang="ts">
import { defineComponent, h, resolveComponent } from 'vue';
export default defineComponent({
setup(){
const query = ref<{name:string}>()
query.value = {name:'name'}
const com = resolveComponent('el-input')
return ()=>{
return h(com ,{
modelValue: query.value.name,
'onUpdate:modelValue'(e) {
query.value.name = e
}})
}
}
})
</script>
需要说明的是：el-input 这个组件是需要全局注册的，不然无论采用 jsx/tsx 还是渲染函数（h,createVNode）都是没有办法找到的。在vue2.x项目中, webpack下的使用transform-vue-jsx转译，可以直接采用 h('el-input')，但是在vite+vue3.x的环境下，需要先使用resolveComponent显式的从全局组件中去查找名称为el-input的组件。
网友评论