To customize the component CustomInput
Example
<script setup> const txt = ref(''); </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>
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
input When the event is triggered, a
update:modelValue custom event carrying a new value is triggered
<script setup> const props = defineProps({ 'modelValue': String, }) const emit = defineEmits(["update:modelValue"]) </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template>
v-model within the component is to use a writable one that has both getter and The
computed attribute of the setter
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>
v-model Easy to do, what if multiple attributes need two-way binding?
v- model uses
modelValue as prop on the components, and uses
update:modelValue as the corresponding event
v -model Specify a parameter to change these names:
<template> <CustomInput v-model:first-name="first" v-model:last-name="last" /> </template>
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(['update:firstName', 'update:lastName']) </script> <template> <input type="text" :value="firstName" @input="$emit('update:firstName', $event.target.value)" /> <input type="text" :value="lastName" @input="$emit('update:lastName', $event.target.value)" /> </template>
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>
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 commentsis the same as the
Although it can be done directly in both directions Binding, but this will destroy the
single data flow
emit trigger event above, but the passed data becomes an object
computed prxoy
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>
setter, because
computed will be a layer of proxy, the proxy object is not modified
setter, as shown below:
// 只有这样才会变化 model.value = { keyword:"asdfad" }
setter, so two-way binding cannot be done. What should I do?
proxy object in getter
! Return a proxy object in getter
! Return a proxy object in getter
!
proxy the proxy object is consistent with the properties of the proxied object, so we use
proxy to wrap the original object
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 }) } })
v-model has some built-in modifiers, such as
.trim,
.number and
.lazy.
v-model to support custom modifiers.
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" />
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('update:modelValue', 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!