v-model 与 v-bind:model

v-model是vue.js中内置的双向数据绑定指令，对表单控件标签的数据双向绑定有效。

如

1 <el-form-item label="姓名" prop="name">
2     <el-input v-model="form.name" />
3 </el-form-item>

这段代码的含义就是el-input与form中的name进行双向绑定

 

:model相当于v-bind:model的缩写， 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了