在vue自定义组件中使用 v-model指令详情

一、前言

如何实现在自定义的vue组件中使用v-model，。 起先觉得挺简单，事实也挺简单，但似乎又没那么简单。因为深谈这涉及指令原理、数据绑定实现原理。

1.技术点提前知

要想在自定义组件中使用v-model，使用上其实就简单几步，这里以自定义input组件为例。

关键步骤：

1.props的使用。在自定义的vue文件中，声明父组件要向子组件传递的prop属性，例如

 props: {
    // 接收string和number类型的值，
    myValue: [String, Number],
  },

注意：myValue这个属性名称是可以自定义的，但[String, Number]不能写成字符串["String","Number"],因为此时它们是构造器，是js的全局api。

2.$emit的使用。用于向上派发事件，在自定义组件中触发，例如：

methods: {
    changeInput ($event) {
      this.$emit('myInput', $event.target.value)
   },
}

向上派发myInput事件，这样model监听myInput才有意义： 当输入字符时触发input事件，进而派发触发自定义的myInput事件， 然后model监听myInput，就实现了数据绑定。必须注意，这里的派发事件名“myInput”必须和model中的event的值相同。

PS: 通过watch监听 input标签的值，然后$emit派发事件，和通过@input派发事件具有一样的效果。只要能达到通信的效果即可，手段是多样的。

3.关键的model。model是允许vue自定义组件使用v-model的关键，虽然有时我们不显性的使用它，也不影响我们在自定义组件中使用v-model指令，这只是因为被设置默认值。而有的时候，显示的使用，并自定义model的prop和event会有益。这是官网关于model的介绍：

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

----本段摘自vue官网

自定义model使用示例：

model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
},

当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。

4.v-model的使用。在父组件中使用自定义组件，例如

<custom-model v-model="myValue"></custom-model>

这样写效果也一样：

<custom-model :my-value="myValue"></custom-model>

二、在自定义的vue组件中使用v-model

1.效果演示图

2.自定义组件代码示例

<template>
  <!-- 自定义组件中使用v-mode指令 -->
  <input type="search" @input="changeInput" data-myValue="">
</template>

<script>
export default {
  name: 'CustomModel',
  // 当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。
  model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
  },
  props: {
    // 接收string和number类型的值，
    // 注意不能是写成字符串["String","Number"],因为此时它们是构造器，是全局变量
    myValue: [String, Number],
  },
  methods: {
    changeInput ($event) {
      // 向上派发myInput事件，这样model监听myInput才有意义：当输入字符时触发input事件，
      // 进而派发触发自定义的myInput事件，然后model监听myInput，就实现了数据绑定
      this.$emit('myInput', $event.target.value)
    },
  }
}
</script>

3.在父组件使用自定义组件

<template>
  <div class="home">
    <h3>输入的实时内容：{{ myValue }}</h3>
    <custom-model v-model="myValue"></custom-model>
  </div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
  name: 'Home',
  components: {
    CustomModel,
  },
  data () {
    return {
      myValue: ''
    }
  },
}
</script>

三、优写时刻

本段是【每一个技术点都值得优写】系列特写段落。 是一种拓展补充，就像数学试卷最后的附加题，读者可以自由选择阅读。

v-model简要补充。 v-model是vue中常用且重要的指令，能起到数据双向绑定的作用。 从MVVM(Model-View-ViewModel)架构的角度理解v-model的数据绑定， 它在需要view层和model层实现交互互动的时，非常有用。 例如，在view层输入数据，会及时更新该数据到model层， 而更新model层中的数据，也会被及时更新到view层， 这种更新业务逻辑是ViewModel在起作用。

先来看下数据双向绑定的效果：

那么vue是如何实现数据绑定的？

①object类型数据实现数据可观测，是通过Object的defineProperty()实现的。

②array类型数据实现数据可观测，是通过拦截重写数据的7个可操作数组且会改变数组自身的方法实现的。

③依赖是一种表示数据和其使用者的关系，依赖管理器会为每一个依赖创建watcher实例。

④数据变化被观测到后，会通过代表依赖的watcher实例，调用update()方法，通知视图更新。

⑤vue提供了set和delete两个全局API，弥补部分新增和删除数据手法，无法被观测，进而影响数据响应式实现的不足。

到此这篇关于在vue自定义组件中使用 v-model指令详情的文章就介绍到这了,更多相关 vue v-model指令内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论