Vue3.0 双向数据绑定

背景

环境：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的组件。

最后编辑于：2021.07.08 19:04:35