vue3에서 v-model을 사용하는 방법

단일 속성 바인딩

기본 바인딩

사용자 정의 구성 요소 CustomInput을 예로 들어보세요CustomInput 举例

<script setup>
    const txt = ref(&#39;&#39;);
 </script>
 
 <template>
  <CustomInput v-model="txt" />
 </template>

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

<CustomInput
  :modelValue="txt"
  @update:modelValue="newValue => txt = newValue"
/>

<CustomInput> 组件内部需要做两件事：

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

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

这里是相应的代码：

<script setup>
const props = defineProps({
  &#39;modelValue&#39;: String,
})
const emit = defineEmits(["update:modelValue"])
</script>

<template>
    <input :value="modelValue" @input="$emit(&#39;update:modelValue&#39;, $event.target.value)" />
</template>

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

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

computed 绑定

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

<script setup>
const value = computed({
  get() {
    return props.modelValue
  },
  set(value) {
    emit("update:modelValue", value)
  }
})
</script>

<template>
 <input v-model="value" />
</template>

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

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

v-model 绑定多个属性

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

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

<template>
    <CustomInput v-model:first-name="first" v-model:last-name="last" />
</template>

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

 <script setup>
 const props = defineProps({
  firstName: String,
  lastName: String,
})
// 在computed中 使用
const emit = defineEmits([&#39;update:firstName&#39;, &#39;update:lastName&#39;])
</script>

<template>
  <input
    type="text"
    :value="firstName"
    @input="$emit(&#39;update:firstName&#39;, $event.target.value)"
  />
  <input
    type="text"
    :value="lastName"
    @input="$emit(&#39;update:lastName&#39;, $event.target.value)"
  />
</template>

绑定对象

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

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

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

<script setup>
import { ref } from "vue"

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

<template>
    <searchBar v-model="modelValue" />
</template>

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

<template>
  <div>
    <!-- <input type="text" v-model="modelValue.keyword"> 可以实现双向绑定 -->
    <input type="text" 
      :value="modelValue.keyword"
      @input="handleKeywordChange"
    >
    <select v-model="modelValue.selectValue">
      <option v-for="o in modelValue.options" :key="o.value" :value="o.value">
        {{ o.label }}
      </option>
    </select>
  </div>
</template>

<script lang="ts" setup>

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
  })
}
</script>

如果传入对象的话，如注释所介绍的那样
<input type="text" v-model="modelValue.keyword">虽然可以直接进行双向绑定，但是这样会破坏单项数据流

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

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

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

<template>
      <input type="text" v-model="model.keyword">
 </template>
 
<script lang="ts" setup>

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

但是当你输入的时候，你会发现并没有触发 setter, 因为 computed 会做一层代理，代理对象没有发生修改

如果想要触发 setter ，如下图：

// 只有这样才会变化
 model.value = {
   keyword:"asdfad"
 }

这种方法无法触发 setter，也就无法双向绑定，该怎么办呢？

在 getter 中返回 一个 代理对象！在 getter 中返回 一个 代理对象！在 getter 中返回 一个 代理对象！

因为 proxy代理的对象是和被代理对象属性是保持一致的，所以我们使用 proxy 包裹原对象

那么 v-model 绑定的是代理之后的对象，如果代理对象属性发生了改变，则会触发代理对象中的 set 方法，此时我们可以触发 emit

const model = computed({
  get() {
    return new Proxy(props.modelValue, {
      set(obj, name, val) {
        emit("update:modelValue", {
          ...obj,
          [name]: val
        })
        return true
      }
    })
  },
  set(value) {
    emit("update:modelValue", {
      ...props.modelValue,
      keyword: value
    })
  }
})

修饰符

我们知道 v-model 有一些内置的修饰符，例如 .trim，.number 和 .lazy。

在某些场景下，我们可能想要一个自定义组件的 v-model 支持自定义的修饰符。

我们来创建一个自定义的修饰符 capitalize，它会自动将 v-model 绑定输入的字符串值第一个字母转为大写：

  <CustomInput v-model.capitalize="txt" />

我们添加了capitalize修饰符，他会被自动传入到 prop 中的 modelModifiers

<script setup>
const props = defineProps({
  modelValue: String,
  modelModifiers: {
    default: () => ({})
  }
})

const emitValue = (e) => {
  let value = e.target.value;
  // 使用 修饰符
  if (props.modelModifiers.capitalize) {
    value = value.charAt(0).toUpperCase() + value.slice(1)
  }
  emit(&#39;update:modelValue&#39;, value)
}
</script>

<template>
  <input :value="modelValue" @input="emitValue" />
</template>

v-model은 다음 형식으로 확장됩니다rrreee🎜<CustomInput> 구성 요소 내에서 두 가지 작업을 수행해야 합니다. 🎜

• 🎜내부 네이티브 <input> 변환 code> 요소 value 속성은 modelValue prop🎜
• 🎜에 바인딩됩니다. 기본 input 이벤트가 트리거되면 새로운 Value의 update:modelValue 맞춤 이벤트 🎜

🎜해당 코드는 다음과 같습니다. 🎜rrreee🎜어떤 사람들은 이런 방식으로 작성하는 것이 너무 번거롭고 라벨 코드가 Long이 되려면 🎜🎜구성 요소 내에서 v-model을 구현하는 또 다른 방법은 getter 및 setter와 함께 쓰기 가능한 계산 속성을 ​​사용하는 것입니다. 🎜🎜계산 바인딩🎜 🎜 계산된 속성인 경우 get 메서드는 modelValue prop을 반환해야 하며 set 메서드는 해당하는 속성을 트리거해야 합니다. event🎜 rrreee🎜이러한 작성 방법은 태그의 속성을 단순화할 수 있으며 논리가 명확합니다.🎜🎜v-model을 사용하여 단일 속성을 쉽게 처리할 수 있습니다. 여러 속성이 양방향이 필요한 경우 어떻게 해야 할까요? 바인딩?🎜🎜v-model 바인딩 여러 속성 정의🎜🎜기본적으로 v-model은 modelValue를 구성 요소의 prop으로 사용하고 update:modelValueupdate:modelValue code>를 해당 이벤트로 🎜🎜그러나 v-model에 매개변수를 지정하여 이러한 이름을 변경할 수 있습니다. 🎜rrreee🎜마찬가지로 prop라는 두 가지 방법으로 바인딩할 수도 있습니다. code>는 원래 modelValue에서 전달된 매개변수 이름으로 변경되었으며 해당 이벤트도 update: 매개변수 이름🎜rrreee🎜Binding object🎜🎜으로 변경되었습니다. 여러 필드에 양방향 바인딩이 필요한 경우 위에 표시된 방법을 사용하면 약간 번거로울 것입니다. 🎜🎜양방향 바인딩 개체의 두 가지 방법을 소개합니다🎜🎜상위 구성 요소 searchBar를 정의합니다. > 복잡한 양식 구성 요소로 🎜rrreee🎜 그런 다음 searchBar 구성 요소에서 modelValue를 받고 유형을 Object🎜rrreee

로 정의합니다. 🎜댓글에 설명된 대로 객체를 전달하는 경우
<input type="text" v-model="modelValue.keyword">양방향 바인딩은 가능하지만 이는 단일 데이터 흐름🎜🎜

🎜위의 emit 트리거 이벤트와 동일하지만 전달된 데이터가 객체가 됩니다🎜🎜사용하더라도 내보내기는 양방향 바인딩을 트리거할 수 있습니다. 수정되었지만 너무 번거롭습니다. 여기에 트릭이라고 할 수 있는 좀 더 우아한 작성 방법이 있습니다. - computed + prxoy🎜🎜 🎜계산 바인딩을 사용하면 이런 코드를 작성할 수도 있습니다🎜rrreee🎜하지만 입력하면 계산이 실행되지 않기 때문에 setter가 실행되지 않는 것을 볼 수 있습니다. 는 레이어 프록시를 수행하지만 프록시 개체는 수정되지 않았습니다🎜🎜아래 표시된 대로 setter를 트리거하려는 경우: 🎜rrreee🎜이 메서드는 setter를 트리거할 수 없습니다. code>이므로 양방향 바인딩이 불가능합니다. 이에 대해 어떻게 해야 합니까? 🎜🎜getter에서 프록시 객체를 반환하세요! 🎜 getter에서 프록시 객체를 반환하세요! 🎜 getter에서 프록시 객체를 반환하세요! 🎜🎜🎜프록시로 표현되는 개체가 프록시된 개체의 속성과 일치하므로 프록시를 사용하여 원본 개체를 래핑합니다. 🎜🎜그런 다음 v- model은 프록시 뒤의 개체에 바인딩됩니다. 프록시 개체의 속성이 변경되면 이때 프록시 개체의 <code>set 메서드가 트리거될 수 있습니다. >emit 🎜rrreee🎜Modifiers🎜🎜 v-model에는 .trim, .number 및 <code> .lazy. 🎜🎜일부 시나리오에서는 사용자 정의 구성 요소의 v-model이 사용자 정의 수정자를 지원해야 할 수도 있습니다. 🎜🎜v-model에 바인딩된 문자열 값의 첫 글자를 자동으로 대문자로 변환하는 사용자 정의 수정자 capitalize를 만들어 보겠습니다. 🎜 rrreee🎜 capitalize 수정자는 prop 🎜rrreee의 modelModifiers🎜에 자동으로 전달됩니다.

위 내용은 vue3에서 v-model을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!