Home > Web Front-end > Vue.js > How to use v-model in vue3

How to use v-model in vue3

王林
Release: 2023-05-10 11:07:32
forward
1884 people have browsed it

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>
Copy after login

v-model It will be expanded into the following form

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

<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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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>
Copy after login

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"
 }
Copy after login

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
    })
  }
})
Copy after login

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" />
Copy after login

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>
Copy after login

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!

Related labels:
source:yisu.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template