企业网站开发的功能_国家市场监督管理总局副局长_深圳新闻最新事件_营销型网站分为哪几种

父组件

<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.valueif(props.firstNameModifiers.capitalize){value = value.charAt(0).toUpperCase()+value.slice(1)}emit('update:firstName',value)
}
const handleInput2= (e) => {let value = e.target.valueif(props.lastNameModifiers.toUpperCase){value = value.toUpperCase()}emit('update:lastName',value)
}
</script><style scoped></style>

总结

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