How to use v-model in vue3

Bind a single attribute

Basic binding

To customize the component CustomInput Example

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

v-model It will be expanded into the following form

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

<custominput></custominput> Two things need to be done inside the component:

• Convert the internal native <input> The value attribute of the element is bound to the modelValue prop

• ## when the native

  input When the event is triggered, a update:modelValue custom event carrying a new value is triggered

Here is the corresponding code:

<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>

Some people You will feel that this way of writing is too cumbersome and will cause the tag code to become lengthy.

Another way to implement

v-model within the component is to use a writable one that has both getter and The computed attribute of the setter

computed is bound

When using the

computed attribute, the get method needs to return modelValue prop, and the set method needs to trigger the corresponding event

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

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

This writing method can simplify the attributes in the tag, and the logic is clear

A single attribute can be used

v-model Easy to do, what if multiple attributes need two-way binding?

v-model Binding multiple attributes

By default,

v- model uses modelValue as prop on the components, and uses update:modelValue as the corresponding event

, but we can pass

v -model Specify a parameter to change these names:

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

Similarly, it can also be bound in two ways, but

prop is changed from the original modelValue Changed to the passed in parameter name, the corresponding event also changed to update: parameter name

 <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>

Binding object

In a complex component, if there are multiple A field requires two-way binding. If you use the method shown above, it will be a bit cumbersome.

Introducing two methods of two-way binding objects

Define the parent component

searchBar For a complex form component

<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>

Then in the

searchBar component, we receive modelValue and define the type as 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>

If an object is passed in, as described in the comments

Although it can be done directly in both directions Binding, but this will destroy the single data flow

is the same as the

emit trigger event above, but the passed data becomes an object

Although using emit can trigger two-way binding, it is too cumbersome. Here is a more elegant way of writing, which can be said to be a strange skill--

computed prxoy

If you use

computed binding, you may write this code

<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>

But when you enter, you will find that it is not triggered

setter, because computed will be a layer of proxy, the proxy object is not modified

If you want to trigger

setter, as shown below:

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

This method cannot trigger

setter, so two-way binding cannot be done. What should I do?

Return a

proxy object in getter! Return a proxy object in getter! Return a proxy object in getter!

Because

proxy the proxy object is consistent with the properties of the proxied object, so we use proxy to wrap the original object

Then

v-model is bound to the object behind the proxy. If the properties of the proxy object change, the set method in the proxy object will be triggered. At this time we can trigger 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
    })
  }
})

Modifiers

We know that

v-model has some built-in modifiers, such as .trim, .number and .lazy.

In some scenarios, we may want a custom component's

v-model to support custom modifiers.

Let’s create a custom modifier

capitalize, which will automatically convert the first letter of the string value of the v-model binding input to uppercase :

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

We added the

capitalize modifier, which will be automatically passed into the modelModifiers in prop中

<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>

The above is the detailed content of How to use v-model in vue3. For more information, please follow other related articles on the PHP Chinese website!