<template> <div> <custom-text-input v-model='value' v-model:lastName='lastName' /> <p> Value: {{ value }} </p> <p> Last Name: {{ lastName }} </p> </div> </template> <script> import CustomTextInput from './CustomTextInput.vue' export default { components: { CustomTextInput, }, data() { return { value: 'Matt', lastName: 'Maribojoc' } } } </script>
然后，在子组件内部：
<template> <div> <label> First Name </label> <input type='text' :value='modelValue' placeholder='Input' @input='$emit("update:modelValue", $event.target.value)' /> <label> Last Name </label> <input type='text' :value='lastName' placeholder='Input' @input='$emit("update:lastName", $event.target.value)' /> </div> </template> <script> export default { props: { lastName: String, modelValue: String, } } </script>
V-model的自定义修饰符正如我们所讨论的，Vue中内置了一些修饰符。但总有一天，我们会想要添加我们自己的。
假设我们想要创建一个修饰符来删除输入中的所有空格。我们称之为无空格。
<custom-text-input v-model.no-whitespace='value' v-model:lastName='lastName' />
在我们的输入组件中，我们可以使用prop来捕获修饰符。自定义修饰符的名称是nameModifiers。
props: { lastName: String, modelValue: String, modelModifiers: { default: () => ({}) } }
好的，我们要做的第一件事是改变@input处理器来使用一个自定义方法。我们可以称它为emitValue，它将接受正在编辑的属性和事件对象的名称。
<label> First Name </label> <input type='text' :value='modelValue' placeholder='Input' @input='emitValue("modelValue", $event)' />
在emitValue方法中，在调用$emit之前，我们要检查修饰符。如果no-whitespace修饰符为true，则可以在将其发送给父对象之前修改该值。
emitValue(propName, evt) { let val = evt.target.value if (this.modelModifiers['no-whitespace']) { val = val.replace(/\s/g, '') } this.$emit(`update:${propName}`, val) }
结论希望你知道了一些有关v-model的新知识。
在它的基本用例(如表单和输入数据)中，v-model是一个非常简单的概念。然而，当我们开始创建自定义组件并处理更复杂的数据时，我们可以真正了解v-model。