• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • 组件 v-model

    首先让我们回忆一下v-model在原生元素上的用法:

    <input v-model="searchText" />
    

    在代码背后,模板编译器会对v-model进行更冗长的等价展开。因此上面的代码其实等价于下面这段:

    <input
      :value="searchText"
      @input="searchText = $event.target.value"
    />
    

    而当使用在一个组件上时,v-model会被展开为如下的形式:

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

    要让这个例子实际工作起来,<CustomInput>组件内部需要做两件事:

    1. 将内部原生<input>元素的value attribute 绑定到modelValue prop
    2. 当原生的input事件触发时,触发一个携带了新值的update:modelValue自定义事件


    <!-- CustomInput.vue -->
    <script setup>
    defineProps(['modelValue'])
    defineEmits(['update:modelValue'])
    </script>
    
    <template>
      <input
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
      />
    </template>
    

    现在v-model可以在这个组件上正常工作了:

    <CustomInput v-model="searchText" />
    


    另一种在组件内实现v-model的方式是使用一个可写的,同时具有gettersettercomputed属性。get方法需返回modelValue prop,而set方法需触发相应的事件:

    <!-- CustomInput.vue -->
    <script setup>
    import { computed } from 'vue'
    
    const props = defineProps(['modelValue'])
    const emit = defineEmits(['update:modelValue'])
    
    const value = computed({
      get() {
        return props.modelValue
      },
      set(value) {
        emit('update:modelValue', value)
      }
    })
    </script>
    
    <template>
      <input v-model="value" />
    </template>
    
    emit('update:modelValue',value)中参数value,数据类型是任意类型:字符串、数字、布尔值、以及数组、对象等。


    v-model 的参数

    默认情况下,v-model在组件上都是使用modelValue作为 prop,并以update:modelValue作为对应的事件。我们可以通过给v-model指定一个参数来更改这些名字:

    <MyComponent v-model:title="bookTitle" />
    

    在这个例子中,子组件应声明一个title prop,并通过触发update:title事件更新父组件值:

    <!-- MyComponent.vue -->
    <script setup>
    defineProps(['title'])
    defineEmits(['update:title'])
    </script>
    
    <template>
      <input
        type="text"
        :value="title"
        @input="$emit('update:title', $event.target.value)"
      />
    </template>
    


    多个 v-model 绑定

    我们可以在单个组件实例上创建多个v-model双向绑定。

    组件上的每一个v-model都会同步不同的 prop,而无需额外的选项:

    <UserName
      v-model:first-name="first"
      v-model:last-name="last"
    />
    
    <script setup>
    defineProps({
      firstName: String,
      lastName: String
    })
    
    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>
    


    处理v-model修饰符

    在学习输入绑定时,我们知道了v-model有一些内置的修饰符,例如.trim.number.lazy。在某些场景下,你可能想要一个自定义组件的v-model支持自定义的修饰符。

    我们来创建一个自定义的修饰符capitalize,它会自动将v-model绑定输入的字符串值第一个字母转为大写:

    <MyComponent v-model.capitalize="myText" />
    

    组件的v-model上所添加的修饰符,可以通过modelModifiers prop 在组件内访问到。在下面的组件中,我们声明了modelModifiers这个 prop,它的默认值是一个空对象:

    <script setup>
    const props = defineProps({
      modelValue: String,
      modelModifiers: { default: () => ({}) }
    })
    
    defineEmits(['update:modelValue'])
    
    console.log(props.modelModifiers) // { capitalize: true }
    </script>
    
    <template>
      <input
        type="text"
        :value="modelValue"
        @input="$emit('update:modelValue', $event.target.value)"
      />
    </template>
    

    注意这里组件的modelModifiers prop 包含了capitalize且其值为true,因为它在模板中的v-model绑定v-model.capitalize="myText"上被使用了。


    有了这个 prop,我们就可以检查modelModifiers对象的键,并编写一个处理函数来改变抛出的值。在下面的代码里,我们就是在每次<input />元素触发input事件时将值的首字母大写:

    <script setup>
    const props = defineProps({
      modelValue: String,
      modelModifiers: { default: () => ({}) }
    })
    
    const emit = defineEmits(['update:modelValue'])
    
    function 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 type="text" :value="modelValue" @input="emitValue" />
    </template>
    


    对于又有参数又有修饰符的v-model绑定,生成的 prop 名将是arg +"Modifiers"。举例来说:

    <MyComponent v-model:title.capitalize="myText">
    

    相应的声明应该是:

    const props = defineProps(['title', 'titleModifiers'])
    defineEmits(['update:title'])
    
    console.log(props.titleModifiers) // { capitalize: true }
    

    上篇:异步组件