Vue 中获取输入框当前值的三种方法

1、在 input 元素上绑定 ref 属性

// html
<div>
  <label>
    测试：<input type="text" ref="test" />
  </label>&nbsp;&nbsp;
  <button @click="getValue">click me</button>
</div>
 
// vue.js
export default {
  methods: {
    getValue() {
      console.log(this.$refs.test.value)
    }
  }
}

2、在 input 元素上绑定 input 事件

使用这种方法时，需要传入参数 $event，然后，通过 $event.currentTarget.value 获取当前值。

// html
<div>
  <label>
    测试：<input type="text" @input="getValue" />
  </label>
</div>

// vue.js
export default {
  methods: {
    getValue(e) {
      console.log(e.currentTarget.value)
    }
  }
}

3、使用语法糖 v-model

v-model 的本质是 v-bind:value 和 v-on:input 的语法糖，当输入框的内容发生变化时，会触发 input 事件，然后 input 事件会获得输入框中当前的值，然后再将这个值赋予 value 属性，使 本地数据 也随之发生变化。

// html
<div>
  <label>
    测试：<input type="testValue" v-model="getValue" />
  </label>&nbsp;&nbsp;
  <button @click="getValue">click me</button>
</div>

// vue.js
export default {
  data(){
    return {testValue:''}
  },
  methods: {
    getValue(e) {
      console.log(this.testValue)
    }
  }
}

4、扩展：语法糖 v-model 和 .sync 的区别

在述例子中，只有一个组件，并且页面有一个 input 输入框，当页面输入内容时，在 当前组件内 获取到 用户在页面内输入的内容。但是，如果存在两个组件，一个父组件，一个子组件，而父组件如果想获得从子组件中传递过来的内容，又该使用什么方法来实现呢？答案是通过触发 input 事件 或者 自定义事件 来传递数据，也就是通过 v-model 和 .sync 的方式，至于两者的区别，下面有两点结论，记住并理解就可以了。

• v-model：既可以用到 普通元素 input 元素上，也可以用到 组件元素（如：Son) 上。子组件通过调用 emit 方法来传递数据，但 emit 方法只能调用一次，因为 v-model 只能触发 input 事件来传递数据，多次调用会造成冲突。父元素或父组件 中的绑定语法为：v-model:value="data"，子组件传递数据语法为：this.$emit('input',data)。

• .sync：只能用到 组件元素（如：Son) 上。子组件也是通过调用 emit 方法来传递数据，但 emit 方法可以调用多次，因为 .sync 本质是通过触发自定义事件来传递数据。父组件 中的绑定语法为：:definedEventName.sync="data"，子组件传递数据语法为：this.$emit('update:definedEventName',data)。【重点一是语法糖 .sync 只能绑定到组件元素中 ，重点二是 definedEventName，重点三子组件中是 emit 方法可以被调用多次，重点四 是 update。 】