web前端面试官： 如何让你开发的组件支持 v-model，在往细了说一说

面试官： 如何让你开发的组件支持 v-model

---

v-model  的本质是语法糖。语法糖，简单来说就是『便捷写法』。[-点击这篇博客有说-](()

在大部分情况下， v-model="foo" 等价于 :value="foo" 加上 @input="foo = $event"；

<el-input :value=“foo” @input=“foo = $event” />

没错，在大部分情况下如此。

但也有例外：

在编程思想上，这种帮助使用者『隐藏细节』的方式叫封装。

冷知识： 如果v-model绑定了相应式对象里不存在的值，vue会自动增加这个属性，并且是响应式的，

通俗总结：data中的user对象有name属性，没有age属性，但是v-model=“user.age”，user中就会增加一个相应式属性age

案例

// template

// script

export default {

data() {

return {

user: {

name: ‘活在风浪里’,

}

}

}

}

面试官： 如何让你开发的组件支持 v-model

---

组件使用v-model相当于在组件上添加:value @input事件，可以通过model属性自定义设置，与data、props同级

在定义 vue 组件时，你可以提供一个 model 属性，用来定义该组件以何种方式支持 v-model。

model 属性本身是有默认值的，如下：

// 默认的 model 属性

export default {

model: {

prop: ‘value’,

event: ‘input’

}

}

案例：

/*

子组件

*/

我几岁：{{ propsAge }}

<el-button @click=“age(1)”>加

<el-button @click=“age(-1)”>减