コンポーネント内の v-model インスタンスの詳細な説明

v-modelの魔法

html

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

js

new Vue({
  el:'#app',
  data:{poin:'zqz'
  }})

入力した値が変わると、データ内のポイントの値も変わります。

理論的には、データの値が変化するとイベントがトリガーされますが、それが見えなかったのでしょうか?

実際、vue のドキュメントには次のように記載されています:

<input v-model="something">

は以下の糖衣構文です

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

入力するたびに、input イベントがトリガーされ、入力はインライン関数をバインドして、something の値を変更します。 input事件，input绑定了内联函数,从而改变了something的值。

你好奇input事件是什么？

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

具体见:MDN的input事件

组件中的v-model

组件的v-model 生效原则

• 接受一个value 属性

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

我们先看一下代码

el-input.vue

<template>

    <div>
      <p>input的封装</p>
      <input type="text"
             ref="input"
             :value="value"
             @input="updateValue($event.target.value)"
             @focus="selectAll"
             >
    </div>

</template>
<script>

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

</script>
<style>
</style>

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

<style>
</style>
<template>
    <!-- 在父组件中使用 -->
    <div>
      <v-el-input></v-el-input>
    </div>

</template>
<script>
import vElInput from &#39;./el-input.vue&#39;

export default {
  name: &#39;tom&#39;,
  components: {
    vElInput
  }
}

</script>

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

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

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

• 方法二：使用v-model

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

给组件绑定v-model

将Tom.vue的代码修改一下

<template>
    <!-- 在父组件中使用 -->
    <div>
      <v-el-input v-model="eleValue"></v-el-input>
      eleValue的值:{{ this.eleValue }}
    </div>

</template>
<script>
import vElInput from &#39;./el-input.vue&#39;

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

</script>

初始状态

输入后的状态

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

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

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

入力イベントが何なのか知りたいですか?

<input> または <textarea> 要素の値が変更されると、DOM 入力イベントが同期的にトリガーされます。 (type = checkbox または type = radio の input 要素の場合、 value 属性が変化しないため、ユーザーがコントロールをクリックしても input イベントは発生しません。) さらに、コンテンツが変更されると、 contenteditable の editor でイベントが発生します。この場合、イベントのターゲットは編集ホスト要素です。 contenteditable true を持つ要素が 2 つ以上ある場合、「編集ホスト」は、その親が編集不可である最も近い祖先要素です。同様に、designMode エディターのルート要素でも起動されます。