:model是v-bind:model的缩写
model是MVVM中的一部分具体参考vue手册
M:(模型model)也就是data中的数据
V:(视图view)也就是模板代码
VM:(视图模型view model)vue的实例
观察发现data中所有的属性最后都出现在了vm身上
vm身上的所有属性及vue原型上所以属性,在vue模板中都可以直接使用
随便找了个图
所以我们知道v-bind:model就是绑定了model的data
v-bind动态绑定指令,默认情况下标签自带属性的值是固定,这种只是将父组件的数据传递到子组件,并没有实现子组件和父组件数据的双向绑定
举个栗子
<el-form :model="form">
<el-form-item label="姓名" prop="name">
<el-input v-model= "form.name"/>
<el-form-item/>
<el-form />
这段代码中el-form-item是el-form的子组件,那么如何将父组件的值传递给子组件呢?就是通过:model传递的,这样的话,子组件便可以取到form中的name了
通俗的说就是在表单中将表单中数据全先与表单父亲组件相连
在表单子组件中就可以通过form.date访问到父组件关联的数据了