网站建设模板网站,一级造价师准考证打印时间,wordpress cpu 100,虚拟空间官网特殊说明#xff1a; 以下vue3语法是基于 3.4之前版本进行使用的#xff0c;3.4之后的版本 引入了 defineModel 宏#xff0c;后续会介绍defineModel
1、vue3 与vue2 中v-model区别 vue3 中v-model绑定的不再是value#xff0c;而是modelValue#xff0c;接收的方法也不再…特殊说明 以下vue3语法是基于 3.4之前版本进行使用的3.4之后的版本 引入了 defineModel 宏后续会介绍defineModel
1、vue3 与vue2 中v-model区别 vue3 中v-model绑定的不再是value而是modelValue接收的方法也不再是input而是update:modelValue vue2 中v-model的主要原因是由于value和input事件可能另有它用比如select、textareaselect选择框绑定的是checked,而不是value同样接受事件也不是input而是change 如下图
2、v3 v2 中绑定单个值
2.1 vue3中双向绑定单个值以及自定义绑定值时候 v-model 在原生input上使用 父组件
templateinput v-modelmyV3Vale /!-- 编译之后等价于 --input :valuemyV3Vale inputmyV3Vale $event.target.value/!-- 引用组件中 // 默认传值是 modelVale--my-son-com :modelValuemyV3Vale :otherPropFieldotherPropFieldupdate:modelValuenewValue myV3Vale newValueupdate:otherPropFieldnewValue myV3Vale newValue/my-son-com
/template子组件
// 以下为MySonCom.vue
templateinput:valueprops.modelValueinputemit(update:modelValue, $event.target.value)/
/template
script setup
// 默认传参必须是modelValue事件必须是update:modelValue在子组件中如下
const props defineProps({modelValue: String
})
const emits defineEmits([update:modelValue])
const update (e) {emits(update:modelValue, e.target.value)
}
//多个参数时 传递额外参数 otherPropField 必须是如下v-model:otherPropField,对应的事件是update:otherPropField
const otherProp defineProps({otherPropField: String
})
const othersEmits defineEmits([update:otherPropField])
const otherUpdate (e) {emits(update:otherPropField, e.target.value)
}
/script2.2、v2 中绑定单个值、多个值 父组件
template!-- 默认传值是 value --my-com-v2 v-modelmyV2Value v-bind:otherField.syncotherField/// 等价与my-com-v2 :valuemyV2Value inputmyV2Value $event/// 绑定额外参数 使用 .syncmy-com-v2 v-bind:otherField.syncotherField/my-com-v2 v-bind:otherFieldotherField v-on:update:otherFieldotherField $event/!-- 在组件中 --
/template子组件 MyComV2.vue
templateinput typetext :valuemyV2Value inputinputChange
/template
script
export default {name: MyComV2,props: {value: {type: String,default: },otherField: {type: String,default: 其他属性}},methods: {inputChange(e) {// v2中双向绑定触发只能是 input 事件this.$emit(input, e.target.value)}}
}
/script3.vue3 中绑定多个值 基于3.4版本之前
父组件
templatemy-son-com v-model:namename v-model:personperson/my-son-com
/template
script setup
import { ref, reactive} from vue
const name ref(Andy)
const person reactive({age: 18,sex: MEN
})
/script
子组件 MySonCom.vue 建议使用 setup 语法糖而不是使用 setup() {} 函数
templateinput typetext :valuename input$emit(update:name, $event.target.value)input typetext :valueperson.age input$emit(update:person, $event.target.value)
/template
script setup
defineProps({name: String,person: Object
})
defineEmits([update:name, update:person])
/script4.vue3 中不在使用.sync 替代方案是 modelValue底层更新逻辑
v3常用修饰符有 .lazy, .number, .trim
template默认是每次 input 事件之后更新数据而添加lazy之后变成每次change事件之后才能更新数据input typetext v-model.lazyname.number 将用户输入的内容转换为 number 数字如果无法转换为number类型的数字则会视为无效的输入input typenumber v-model.numberage.trim 将用户输入内容 两端的空格 自动去除input typetext v-model.trimname
/template
