v-model 與 v-bind:model

v-model是vue.js中內置的雙向數據綁定指令，對表單控件標簽的數據雙向綁定有效。

如

<el-form-item label="姓名" prop="name">
    <el-input v-model="form.name" />
</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了