Prenons le composant personnalisé CustomInput comme exempleCustomInput 举例
<script setup>
const txt = ref('');
</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({
'modelValue': String,
})
const emit = defineEmits(["update:modelValue"])
</script>
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
</template>有些人会觉得这种写法过于繁琐，会导致标签代码变得冗长
另一种在组件内实现 v-model 的方式是使用一个可写的，同时具有 getter 和 setter 的 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 在组件上都是使用 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(['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 为一个复杂表单组件
<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" />
我们添加了 Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!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('update:modelValue', value)
}
</script>
<template>
<input :value="modelValue" @input="emitValue" />
</template>v-model sera développé sous la forme suivanterrreee🎜<CustomInput> Deux choses doivent être faites à l'intérieur du composant : 🎜
🎜Voici le code correspondant : 🎜rrreee🎜Certaines personnes peuvent penser que cette façon d'écrire est trop lourde et entraînera le code de l'étiquette pour devenir Long 🎜🎜Une autre façon d'implémenter <input> natif interne : L'attribut
value de l'élément code> est lié à modelValue prop🎜input est déclenché, un nouveau Événement personnalisé update:modelValue de Value 🎜v-model dans un composant est d'utiliser une propriété calculée inscriptible avec à la fois un getter et un setter 🎜🎜liaison calculée🎜 🎜Lors de l'utilisation du calculed, la méthode get doit renvoyer la prop modelValue et la méthode set doit déclencher la propriété correspondante event🎜 rrreee🎜Cette façon d'écrire peut simplifier les attributs dans la balise, et la logique est claire🎜🎜Un seul attribut peut être facilement géré en utilisant v-model. Que se passe-t-il si plusieurs attributs nécessitent une communication bidirectionnelle. liaison ?🎜🎜liaison v-model Définir plusieurs attributs🎜🎜Par défaut, v-model utilise modelValue comme accessoire sur le composant, et update:modelValue code> comme événements correspondants 🎜🎜Mais nous pouvons changer ces noms en spécifiant un paramètre sur <code>v-model : 🎜rrreee🎜De même, il peut également être lié de deux manières, simplement prop code> est passé du <code>modelValue d'origine au nom du paramètre transmis, et l'événement correspondant a également été modifié en update: nom du paramètre🎜rrreee🎜Objet de liaison🎜🎜Dans un complexe In le composant, si plusieurs champs nécessitent une liaison bidirectionnelle, cela sera un peu fastidieux si vous utilisez la méthode indiquée ci-dessus 🎜🎜Présentation de deux méthodes d'objets de liaison bidirectionnelle🎜🎜Définissez le composant parent searchBar En tant que composant de formulaire complexe 🎜rrreee🎜 Ensuite, dans le composant <code>searchBar, nous recevons modelValue et définissons le type comme Object🎜rrreee 🎜Si Si vous transmettez un objet, comme décrit dans les commentaires
🎜C'est la même chose que l'événement déclencheur <input type="text" v-model="modelValue.keyword">Bien que la liaison bidirectionnelle puisse être effectué directement, cela détruira leflux de données unique🎜🎜
emit ci-dessus, mais les données transmises deviennent un objet🎜🎜Bien qu'en utilisant émettre peut déclencher une liaison bidirectionnelle C'est corrigé, mais c'est trop lourd Voici une façon d'écrire plus élégante, qui peut être considérée comme une astuce - calculé + prxoy🎜🎜. 🎜Si vous utilisez la liaison calculée, vous pouvez écrire ce type de code🎜rrreee🎜Mais lorsque vous entrez, vous constaterez que setter n'est pas déclenché, car calculé fera un proxy de couche, l'objet proxy n'a pas été modifié🎜🎜Si vous souhaitez déclencher setter, comme indiqué ci-dessous : 🎜rrreee🎜Cette méthode ne peut pas déclencher setter code>, et donc la liaison bidirectionnelle n'est pas possible. Que faire ? 🎜🎜Renvoyer un objet proxy dans getter ! 🎜Renvoyer un objet proxy dans getter ! 🎜Renvoyer un objet proxy dans getter ! 🎜🎜🎜Parce que l'objet représenté par proxy est cohérent avec les propriétés de l'objet proxy, nous utilisons donc proxy pour envelopper l'objet d'origine 🎜🎜Ensuite v- model est lié à l'objet derrière le proxy. Si les propriétés de l'objet proxy changent, la méthode <code>set dans l'objet proxy sera déclenchée à ce moment-là. >emit 🎜rrreee🎜Modifiers🎜🎜Nous savons que v-model a des modificateurs intégrés, tels que .trim, .number et <code> .lazy. 🎜🎜Dans certains scénarios, nous pouvons souhaiter que le v-model d'un composant personnalisé prenne en charge les modificateurs personnalisés. 🎜🎜Créons un modificateur personnalisé capitalize, qui convertira automatiquement la première lettre de la valeur de chaîne liée à v-model en majuscule : 🎜 rrreee🎜Nous avons ajouté le capitalize modificateur, qui sera automatiquement passé dans les modelModifiers🎜 dans prop 🎜rrreee
La différence entre vue2.0 et 3.0
Quels sont les cycles de vie de vue3
Méthode de récupération supprimée ntuser.dat
Le WiFi ne montre aucun accès à Internet
Explication détaillée de la commande imp dans Oracle
Comment utiliser DataReader
Quels sont les types de fichiers
Comment ouvrir le fichier nrg
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
