网站建设套用模板类的要多少钱,深圳社保个人网页,基本网站建设知识,网页制作公司要求V-model 大多数情况是用在 表单数据上的#xff0c; 但它不止这一个作用 父子组件的数据同步#xff0c; 有一个 语法糖 v-model#xff0c;这个方法简化了语法#xff0c; 在elementplus中#xff0c;都有很多地方使用#xff0c; 所以我们要理解清楚 父组件 使用 v-mod…V-model 大多数情况是用在 表单数据上的 但它不止这一个作用 父子组件的数据同步 有一个 语法糖 v-model这个方法简化了语法 在elementplus中都有很多地方使用 所以我们要理解清楚 父组件 使用 v-model 向子组件 传递了一个 money 的数据
templatediv classparentwrapper我是父组件 我的money是 {{money}}hr/child v-modelmoney/child/div
/templatescript setup
import {ref} from vue;
import child from /views/Home/child.vue;
let money ref(10000);
/script子组件
templatediv classchild我从父组件那里得到 {{props.modelValue}}button clickchangeMoney我来改变父组个的money/button/div
/templatescript setuplet props defineProps([modelValue]);let emit defineEmits([update:modelValue]);const changeMoney (){emit(update:modelValue,props.modelValue1000);}
/script
从上面的代码中可以看到 v-model 对父组件的代码量是有明显减少的 对子组件中的代码量没有变化 子组件 一方面是要在 prop 中接收 父组件隐式传来的属性名 modelValue , 另一方面要在子组件中的 自定义一个名为 update:modelValue 的一个事件 当 子组件的 dom click 事件触发后 调用 emit(“update:modelValue” 这种方式对我们写的组件进行封装是很有做用的子组件封装好方法 父组件只需要使用 v-model 就可以同步子组件中的数据了 v-model的进阶用法
上面的例子中v-model只能在一个子组件中写一次 那如果我有两个或多个数据要和子组件同步怎么办呢 我们可以使用 v-model:XXX 来解决
我们在父组件中 利用 v-model 向子组件传递了两个数据 money 和 person
templatediv classparentwrapper我是父组件 我的money是 {{money}}hr/child v-model:moneymoney v-model:personperson/child/div
/templatescript setup
import {ref} from vue;
import child from /views/Home/child.vue;
let money ref(10000);
let person ref(孙悟空)
/script
在子组件中我们接收到父组件的 v-modelXXX 传来数据
templatediv classchild我从父组件那里得到 {{props.money}}-------{{person}}button clickchangeMoney我来改变父组个的money/buttonbutton clickchangePerson我来改变父组件中的person/button/div
/templatescript setuplet props defineProps([money,person]);let emit defineEmits([update:moeny,update:person]);const changeMoney (){emit(update:money,props.money1000);}const changePerson (){emit(update:person,如来佛祖);}/script从上面的代码 我们看到 我们在子组件中 使用 prop 接收了 v-model:XXX 中的 XXX 属性 同时 我们定义了两个对象的自定义事件 update:XXX 事件 当子组件的 dom click 事件触发时 就emit:XXX 事件
——————
父组件中没有添加任何代码就实现了父子组件的数据同步
这就是 V-model 的语法糖的效果
