v-model和 .sync
model Sync
2023-09-11 14:21:35 时间
1、v-model的双向数据绑定其实是一个语法糖,类似于,给子组件传入一个value值,并且监听子组件的input事件,在这个事件里将子组件传过来的新值赋值给父组件的value
<Input v-model="username"> //同于下: <Input :value="username" @input="username=$event"> //在子组件里面需要接收value属性,并绑定input事件
//子组件
<input :value="value" @input="onInput">
//props选项:
props: {
value: {
type: String,
default: ""
}
},
//methods选项
methods: {
onInput(e) {
// 派发事件,传递最新的值
this.$emit("input", e.target.value);
}
}
注:v-model的语法糖的默认传递的属性是value,默认监听的事件是input事件
当然,默认属性和默认事件可以在子组件中自定义,如下:
//Input.vue子组件中有一个model选项可以用来自定义v-model的默认属性和事件(vue2.4以上的版本中新加的) { model:{ prop:'checked', //传递的属性 event:'change' //监听的事件 } }
这样在子组件中,就可以结束checked属性值,和绑定change事件了
2、.sync修饰符和v-model实现的效果是相像的,只是.sync的绑定事件是不变的,也不能自定义的,必须是update:属性名;但是传入的属性是可以随意定义的,只要和事件update后面的参数保持一致就行了
<Input :aaa.sync="username"> //如同下 <Input :aaa.sync="username" @update:aaa="username = $event"> //这样也能实现数据的双向绑定
此时子组件中,子组件绑定的事件的$emit的事件也必须是update:aaa
this.$emit("update:aaa,false);
这样在父组件中才能监听到子组件的变化
总结一下:v-model是比较灵活的,它有默认的属性和事件,也可以自定义指定,比较方便;相比下,sync的事件就是固定不变的了,无法自定义
相关文章
- 转载博文: Py西游攻关之IO model
- 卡尔曼滤波— Constant Velocity Model
- [TypeScript] Model a DataStore type
- [Node] Define MongoDB Model with Mongoose
- v-model.trim用于去掉输入框内首尾空格 && @input只要输入的值变化了就会触发input
- difference between JSON Model and client model
- SAP UI5 视图如何使用工程里的 sample data 作为 JSON model 的数据源
- 成功解决算法模型在预测的时候model.predict(X_test)其预测功能戛然而止且代码无bug的无提示的无法继续向下运行代码而在当前直接退出
- symfony框架MVC模式中的Model使用方法
- ChatGLM-6B —— 80%替换ChatGPT的开源对话大模型介绍(GLM,General Language Model )
- Actor 分布式并行计算模型: The Actor Model for Concurrent Computation
- Qt Model/View(模型/视图)结构(无师自通)
- 【文献学习】Model-Driven Channel Estimation for OFDM Systems Based on Image SuperResolution Network
- Django Model 自动生成 E-R 图
- 【四】3D Object Model之创建Creation——clear_object_model_3d()/copy_object_model_3d()算子
- 【三】3D匹配Matching之曲面匹配Surface—Based——serialize_surface_model()算子
- PyTorch使用技巧3:简单理解nn.Sequential()、super().__init__()、__call__、model.train()、model.eval()和前后传播