招远建网站,专业营销网站开发,给wordpress菜单加图标,学生服务器租用v-model 简介 官网是这样解释 v-model 的 v-model 的功能是#xff0c;实现数据的双向绑定【本质上是 :value 和 input 语法糖】 如果是表单元素#xff0c;下面两种写法是一样#xff0c;这时v-model就是语法糖#xff0c;帮你简化了操作 input v-modelmessag…v-model 简介 官网是这样解释 v-model 的 v-model 的功能是实现数据的双向绑定【本质上是 :value 和 input 语法糖】 如果是表单元素下面两种写法是一样这时v-model就是语法糖帮你简化了操作 input v-modelmessageinput :valuemessage inputmessage $event.target.value如果是自定义的组件那就相当于 templateinput:valuemodelValueinputemit(update:modelValue, $event.target.value)/ /templatescript setup const props defineProps([modelValue]) const emit defineEmits([update:modelValue]) /scriptv-model 是单项数据流典型案例之一 什么是单项数据流 『单向数据流』总结起来其实就8个字『数据向下事件向上』。 数据流的方向是固定的通常是从父组件流向子组件。子组件通过事件的形式通知父组件修改数据这意味着数据只能从一个方向流向另一个方向而不会出现循环依赖或数据的混乱更新。 defineModel()宏简介 defineModel 其实也是一个语法糖是对v-model再包装的语法糖 defineModel 帮你获取到了prop 中的 modelValue 且当 值发生变化时会自动帮你调用 update:modelValue const myProps defineProps([modelValue]); const myEmits defineEmits([update:modelValue]);// 说白了这里的 modelValue 等价于 props.modelValue emit(update:modelValue) // defineModel 帮你 封装了 modelValue 和 update:modelValue const modelValue defineModel();v-model 和 defineModel 的一些应用区别父子组件的形式 默认的v-model 所谓默认的 v-model 就是直接使用 v-model 不带任何修饰符 此时在子组件中可以在 porps 中获取一个默认值就是 modelValue 这里和v-bind属性绑定很像别搞混了准确来说v-bind可以做到所有v-model可以做到的事情只是 v-model 在数据双向绑定这块的处理会比v-bind更简单 父组件 templatedefineModelChild v-modelchildValue/defineModelChild /templatescript setup import { ref } from vue; import defineModelChild from ./components/defineModelChild.vue;const childValue ref(0); /scriptv-model子组件 templatediv{{ modelValue }}/divbutton clickmyEmits(update:modelValue, modelValue 1)数据 1/button /templatescript setup defineProps([modelValue]);const myEmits defineEmits([update:modelValue]); /scriptdefineModel() 子组件 templatediv{{ modelValue }}/divbutton clickmodelValue数据 1/button /templatescript setup const modelValue defineModel(); /script带参数的v-model 父组件 templatedefineModelChild v-model:childValueModelchildValue/defineModelChild /templatescript setup import { ref } from vue; import defineModelChild from ./components/defineModelChild.vue;const childValue ref(0); /scriptv-model子组件 templatediv{{ childValueModel }}/divbutton clickmyEmits(update:childValueModel, childValueModel 1)数据 1/button /templatescript setup const myProps defineProps([childValueModel]); const myEmits defineEmits([update:childValueModel]); /scriptdefineModel() 子组件 templatediv{{ defineModelChildValue }}/divbutton clickdefineModelChildValue数据 1/button /templatescript setup // 这里接收父组件传递过来的值并返回一个ref响应式数据你可以对这个ref响应式数据进行操作当你对这个值进行修改时父组件会自动更新 const defineModelChildValue defineModel(childValueModel); /script同时绑定多个v-model 父组件 templateChild v-model:namename v-model:addressaddress/Child /templatescript setup import { ref } from vueconst name ref() const address ref() /scriptv-model子组件 templateinputtypetext:valuenameinput$emit(update:name, $event.target.value)/inputtypetext:valueaddressinput$emit(update:address, $event.target.value)/ /templatescript setup defineProps([name, address]) defineEmits([update:name, update:address]) /scriptdefineModel() 子组件 templateinput typetext v-modelnameinput typetext v-modeladdress /templatescript setup const name defineModel(name) const address defineModel(address) /script