vue3自定义修饰符

父组件

<template>
  <div>
    <p>父子组件 firstName:{{firstName}} lastName:{{lastName}}</p>
    <username v-model:firstName.capitalize="firstName" v-model:lastName.toUpperCase="lastName" />
  </div>
</template>
<script setup>
import { ref } from 'vue'

import Username from '@/views/passValue/vmodel/username.vue'


const firstName = ref('')
const lastName = ref('')

const searchText = ref('')

const getCount = (count) => {
  console.log(count)
  countRef.value = count
}
</script>

<style scoped>

</style>

子组件

<template>
  <div>
    <input type="text" :value="firstName" @input="handleInput1"/>
    <input type="text" :value="lastName" @input="handleInput2"/>
  </div>
</template>
<script setup>
const props = defineProps({
  firstName: {
    type: String,
    default: '',
  },
  lastName:{
    type: String,
    default: ''
  },
  firstNameModifiers:{
    default: () => ({})
  },
  lastNameModifiers:{
    default: () => ({})
  }
})
const emit = defineEmits(['update:firstName','update:lastName'])
const handleInput1= (e) => {
  let value = e.target.value
  if(props.firstNameModifiers.capitalize){
    value = value.charAt(0).toUpperCase()+value.slice(1)
  }
  emit('update:firstName',value)
}
const handleInput2= (e) => {
  let value = e.target.value
  if(props.lastNameModifiers.toUpperCase){
    value = value.toUpperCase()
  }
  emit('update:lastName',value)
}
</script>

<style scoped>

</style>

总结

vue中自定义修饰符可以增强事件监听或双向数据绑定的功能，可以为特定的操作提供更多的灵活性，它通过组合指令和修饰符来简化代码，使其更具可读性和可重用性