vue3中的v | 您所在的位置:网站首页 › 怎么做生日代码 › vue3中的v |
绑定单个属性基础绑定 以 自定义组件 CustomInput 举例 const txt = ref(''); 登录后复制v-model 会被展开为如下的形式 登录后复制组件内部需要做两件事: 将内部原生 元素的 value attribute 绑定到 modelValue prop 当原生的 input 事件触发时,触发一个携带了新值的 update:modelValue 自定义事件 这里是相应的代码: const props = defineProps({ 'modelValue': String, }) const emit = defineEmits(["update:modelValue"]) 登录后复制有些人会觉得这种写法过于繁琐,会导致标签代码变得冗长 另一种在组件内实现 v-model 的方式是使用一个可写的,同时具有 getter 和 setter 的 computed 属性 computed 绑定使用computed 属性时, get 方法需返回 modelValue prop,而 set 方法需触发相应的事件 const value = computed({ get() { return props.modelValue }, set(value) { emit("update:modelValue", value) } }) 登录后复制这种写法可以简化标签中的属性,逻辑清晰 单个属性可以使用 v-model 轻松搞定,如果多个属性都需要双向绑定呢? v-model 绑定多个属性默认情况下,v-model 在组件上都是使用 modelValue 作为 prop,并以 update:modelValue 作为对应的事件 但我们可以通过给 v-model 指定一个参数来更改这些名字: 登录后复制同样的,也可以用两种方式绑定,只是 prop 从原来的 modelValue 变为了传入的参数名,对应的事件也变成了 update:参数名 const props = defineProps({ firstName: String, lastName: String, }) // 在computed中 使用 const emit = defineEmits(['update:firstName', 'update:lastName']) 登录后复制绑定对象在一个复杂的组件中,如果多个字段需要双向绑定,如果使用上文所示方法的话,会有一些繁琐 介绍两种双向绑定对象的做法 定义父组件 searchBar 为一个复杂表单组件 import { ref } from "vue" const modelValue = ref({ keyword: "123", selectValue: "", options: [ { label: "全部", value: "" }, { label: "a1", value: "1" }, { label: "a2", value: "2" }, ] }) 登录后复制那么在 searchBar 组件内,我们接收 modelValue 并定义类型为 Object {{ o.label }} const props = defineProps({ modelValue: { type: Object, default: () => ({}) } }) const emit = defineEmits(["update:modelValue"]); // 以 input 举例 const handleKeywordChange=(val)=>{ emit("update:modelValue",{ ...props.modelValue, keyword:val.target.value }) } 登录后复制如果传入对象的话,如注释所介绍的那样虽然可以直接进行双向绑定,但是这样会破坏单项数据流 和上文的 emit 触发事件一样,但是传递的数据则变成了对象 虽然使用 emit 可以触发双向绑定,但是过于繁琐,下面介绍一种更优雅的写法,可以说是一种奇技淫巧 -- computed + prxoy 如果使用 computed 绑定,你可能会写出这种代码 const model = computed({ get() { return props.modelValue }, set(value) { // console.log(value) // 发现没有打印 emit("update:modelValue", { ...props.modelValue, keyword: value }) } }) 登录后复制但是当你输入的时候,你会发现并没有触发 setter, 因为 computed 会做一层代理,代理对象没有发生修改 如果想要触发 setter ,如下图: // 只有这样才会变化 model.value = { keyword:"asdfad" }登录后复制这种方法无法触发 setter,也就无法双向绑定,该怎么办呢? 在 getter 中返回 一个 代理对象!在 getter 中返回 一个 代理对象!在 getter 中返回 一个 代理对象! 因为 proxy代理的对象是和被代理对象属性是保持一致的,所以我们使用 proxy 包裹原对象 那么 v-model 绑定的是代理之后的对象,如果代理对象属性发生了改变,则会触发代理对象中的 set 方法,此时我们可以触发 emit const model = computed({ get() { return new Proxy(props.modelValue, { set(obj, name, val) { emit("update:modelValue", { ...obj, [name]: val }) return true } }) }, set(value) { emit("update:modelValue", { ...props.modelValue, keyword: value }) } })登录后复制修饰符我们知道 v-model 有一些内置的修饰符,例如 .trim,.number 和 .lazy。 在某些场景下,我们可能想要一个自定义组件的 v-model 支持自定义的修饰符。 我们来创建一个自定义的修饰符 capitalize,它会自动将 v-model 绑定输入的字符串值第一个字母转为大写: 登录后复制我们添加了capitalize修饰符,他会被自动传入到 prop 中的 modelModifiers 中 const props = defineProps({ modelValue: String, modelModifiers: { default: () => ({}) } }) const emitValue = (e) => { let value = e.target.value; // 使用 修饰符 if (props.modelModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1) } emit('update:modelValue', value) } 登录后复制以上就是vue3中的v-model怎么使用的详细内容,更多请关注php中文网其它相关文章! |
CopyRight 2018-2019 实验室设备网 版权所有 |