v-model的本质是什么?

142 阅读1分钟

v-model

v-model是一个常用的表单指令,也是唯一一个双向绑定指令。双向的含义是:状态的变化能更新到视图上;用户在表单中的修改也能更新到状态中。

语法糖

v-model的本质是对自定义属性和自定义事件的综合使用。默认情况下是value属性和input事件。具体来说,

<组件 v-model='状态'/>
复制代码

等价于:

<组件 :value='状态' @input='新值=>状态=新值' />
复制代码

所以,我们可以把它使用在任意的自定义组件中,来达到父子组件通讯的目的。

model

当然,也可以在组件内部设置 model配置项来定制 value和input名。基本格式如下。

组件{
    model: { prop: '不是value的其他属性名', event: '不是input的其他事件名' },
    props: ['不是value的其他属性名'] // 代替value接收属性
}