首页  >  文章  >  web前端  >  组件中的v-model实例详解

组件中的v-model实例详解

零下一度
零下一度原创
2017-06-26 10:36:222153浏览

v-model的神奇


html

<div id="app">
 <input v-model="poin">
  {{ poin }}</div>

js

new Vue({
  el:&#39;#app&#39;,
  data:{poin:&#39;zqz&#39;
  }})

一旦我们输入的值发生变化,data中的poin值也会发生变化。

理论上data中的值发生变化是会出发事件的,但是我们没看见?

其实在vue的文档中有说明:

<input v-model="something">

是下面的语法糖

<input v-bind:value="something" v-on:input="something = $event.target.value">

每次我们输入的时候触发了input事件,input绑定了内联函数,从而改变了something的值。

你好奇input事件是什么?

d5fd7aea971a85678ba271703566ebfd4750256ae76b6b9d804861d8f69e79d3 元素的值更改时,DOM input 事件会同步触发。(对于 type = checkbox 或 type = radio 的输入元素,当用户单击控件时,输入事件不会触发,因为value属性不会更改。) 此外,当内容更改时,它会在 contenteditable 的编辑器上触发。在这种情况下,事件目标是编辑主机元素。如果有两个或多个具有 contenteditable 的元素为真,“编辑主机”是其父级不可编辑的最近的祖先元素。同样,它也会在 designMode 编辑器的根元素上触发。

具体见:MDN的input事件

组件中的v-model


组件的v-model 生效原则

  • 接受一个value 属性

  • 在有新的value 时触发 input 事件

我们先看一下代码

el-input.vue

d477f9ce7bf77f53fbcf36bec1b69b7a

    dc6dce4a544fdca2df29d5ac0ea9906b
      e388a4556c0f65e1904146cc1a846beeinput的封装94b3e26ee717c64999d7867364b1b4a3
      1813ca81a5bc6e5e4d9e4db5cb03ae09
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a

export default {
  name: 'el-input',
  props: {
    value: {
      type: Number,
      default: 0
    },
  },
  methods: {
    // 每次都会加一
    updateValue (value) {
      this.$refs.input.value = value + 1;
    },
    selectAll(event) {
      setTimeout(function () {
        event.target.select()
      }, 0)
    }
  }
}

2cacc6d41bbb37262a98f745aa00fbf0
c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927

将这个组件在Tom.vue中使用

c9ccee2e6ea535a969eb3f532ad9fe89
531ac245ce3e4fe3d50054a55f265927
d477f9ce7bf77f53fbcf36bec1b69b7a
    102ab924d89e509a93751c12855efd5b
    dc6dce4a544fdca2df29d5ac0ea9906b
      581b752f8958e789522d96089d885571da9236a413cd032428793817d58785c2
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import vElInput from './el-input.vue'

export default {
  name: 'tom',
  components: {
    vElInput
  }
}

2cacc6d41bbb37262a98f745aa00fbf0

组件中的v-model实例详解

每次使用的时候都会在后面加个1

但是问题来了,我们要如何在Tom.vue中取到这个值呢?

  • 方法一:使用事件 但是感觉有点曲线救国

  • 方法二:使用v-model

这里就体现出了v-model的强大了,因为上面的语法糖,自动的绑定了input事件。所以我们可以利用这个特性去做些事情。

给组件绑定v-model

将Tom.vue的代码修改一下

d477f9ce7bf77f53fbcf36bec1b69b7a
    102ab924d89e509a93751c12855efd5b
    dc6dce4a544fdca2df29d5ac0ea9906b
      42df839a2e7b33d0a8a98a26e44f5e5dda9236a413cd032428793817d58785c2
      eleValue的值:{{ this.eleValue }}
    16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
import vElInput from './el-input.vue'

export default {
  name: 'tom',
  components: {
    vElInput
  },
  data () {
    return {
      eleValue: 666 //设置一个默认值
    }
  }
}

2cacc6d41bbb37262a98f745aa00fbf0

初始状态
组件中的v-model实例详解

输入后的状态组件中的v-model实例详解

然后当我们输入的值发生变化的时,我们预想的eleValue依旧没有发生变化,而el-input.vue中的value确发生了变化

也是就是说value发生变化后没有传递(同步)到父组件中,这也就是vue1中的.sync的用处,而在vue2中已经废弃了。

修改el-input.vue代码,增加this.$emit('input', value*1)

...updateValue (value) {  this.$refs.input.value = value + 1;  // 触发组件上绑定的input事件,以实现value同步  this.$emit(&#39;input&#39;, value*1)},...

这下就实现了值的同步问题。

以上是组件中的v-model实例详解的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn