vue在自定义组件中使用v-model及v-model的本质

2023-01-05 15:50:14 浏览数 (1)

1、v-model本质

  • 首先我们来看看v-model是个什么东西?

其实本质上,v-model是v-bind以及v-on配合使用的语法糖,举个例子:

代码语言:javascript复制
<input v-model="value" />

// 就是相当于: 
<input :value="value" @input="value= $event.target.value" />

2、model选项

(1)由上面可以知道v-model的本质是什么,那么我们如何在自定义组件上使用v-model呢?首先要了解model这个选项。

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

(2)结合第一点的代码概括起来是个什么意思呢?就是说,本来默认是这样的:

  • 子接收到的prop值 = value
  • 监听子组件触发的事件名event = input

(3)我们要在自定义组件上用啊,老是用默认的那岂不是限制了我的发挥?于是,vue在2.2.0版本中新增了一个model选项,可以让我们这样:

  • 子接收到的prop值 = “想什么值就什么值”
  • 监听子组件触发的事件名event = “想什么事件名就什么事件名”

(4)还是有点蒙?没关系,实践才是检验真理的唯一标准嘛,我们来用实例跑一下,看看怎么用,不过在这之前,你得先理解父子组件中的传值、单项数据流是怎么一回事。

3、使用实例

  • 父组件中使用v-model 父组件中
  • 子组件中的model选项就做了前面所说的事情:接收到的prop就是text,定义绑定监听的事件名就是onEmitFromChild。 子组件中
  • 最后我们就可以看到在组件上实现了值的绑定
  • 好的,到了这里我们为了加深理解同时也是为了响应开头,达到一波首尾呼应的强烈文章效果,,,,在子组件中(父组件不用动),我们注释掉model选项,使用默认的方式,这样应该你能更好的再次理解v-model的本质。(效果跟上面的gif是一样的)

其实本质上,v-model是v-bind以及v-on配合使用的语法糖。 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。

v-model的本质

4、最后

其实在我的理解中,将v-model运用在自定义组件中实现值的双向绑定,这只不过是简化了单向数据流的操作,比如不用注册接收emit发射出来的事件函数再去改变值,减少了代码量。但是我觉得提高了维护成本,可能在例如表单组件中可以较好的运用这个特性以外,我还是宁愿麻烦一点走个完整的单项数据流,如果状态比较多就用vuex,这样可能更加直观,更好维护。

0 人点赞