vue3中的v-model怎么使用

绑定单个属性

基础绑定

以 自定义组件 CustomInput 举例

    const txt = ref('');
 
 
 

v-model 会被展开为如下的形式

 组件内部需要做两件事：

• 将内部原生  元素的 value attribute 绑定到 modelValue prop

• 当原生的 input 事件触发时，触发一个携带了新值的 update:modelValue 自定义事件

这里是相应的代码：

const props = defineProps({
  'modelValue': String,
})
const emit = defineEmits(["update:modelValue"])

有些人会觉得这种写法过于繁琐，会导致标签代码变得冗长

另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 computed 属性

computed 绑定

使用computed 属性时， get 方法需返回 modelValue prop，而 set 方法需触发相应的事件

const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit("update:modelValue", value)
  }
})

这种写法可以简化标签中的属性，逻辑清晰

单个属性可以使用 v-model 轻松搞定，如果多个属性都需要双向绑定呢?

v-model 绑定多个属性

默认情况下，v-model 在组件上都是使用 modelValue 作为 prop，并以 update:modelValue 作为对应的事件

但我们可以通过给 v-model 指定一个参数来更改这些名字：

同样的，也可以用两种方式绑定，只是 prop 从原来的 modelValue 变为了传入的参数名,对应的事件也变成了 update:参数名

 
 const props = defineProps({
  firstName: String,
  lastName: String,
})
// 在computed中 使用
const emit = defineEmits(['update:firstName', 'update:lastName'])

绑定对象

在一个复杂的组件中，如果多个字段需要双向绑定，如果使用上文所示方法的话，会有一些繁琐

介绍两种双向绑定对象的做法

定义父组件 searchBar 为一个复杂表单组件

import { ref } from "vue"

const modelValue = ref({
  keyword: "123",
  selectValue: "",
  options: [
    {
      label: "全部",
      value: ""
    },
    {
      label: "a1",
      value: "1"
    },
    {
      label: "a2",
      value: "2"
    },
  ]
})

那么在 searchBar 组件内，我们接收 modelValue 并定义类型为 Object

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(["update:modelValue"]);

// 以 input 举例
const handleKeywordChange=(val)=>{
  emit("update:modelValue",{
    ...props.modelValue,
    keyword:val.target.value
  })
}

如果传入对象的话，如注释所介绍的那样
虽然可以直接进行双向绑定，但是这样会破坏单项数据流

和上文的 emit 触发事件一样，但是传递的数据则变成了对象

虽然使用 emit 可以触发双向绑定，但是过于繁琐，下面介绍一种更优雅的写法，可以说是一种奇技淫巧 -- computed + prxoy

如果使用 computed 绑定，你可能会写出这种代码

 


const model = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    // console.log(value) // 发现没有打印
     emit("update:modelValue", {
      ...props.modelValue,
       keyword: value
     })
  }
})