双向绑定与v-model

[Vue] 双向绑定与v-model

什么是双向绑定

变量变化，UI也跟着变化；当用户改变UI，变量也随之变化，这就是双向绑定。

在Vue中，通过v-model实现表单的双向绑定。

v-model的实质

实质是监听用户的输入事件以更新数据，对一些极端场景进行一些特殊处理。

是v-bind:value和v-on:input的语法糖。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<!--上面的写法与下面的写法完全等价-->
<input :value="message" @input="message = $event.target.value" placeholder="edit me">
<p>Message is: {{ message }}</p>

适用范围

<input>、<textarea>、<checkbox>、<radio>、<form> 及 <select> 元素

三个修饰符

• .lazy

  监听change事件而不是input事件

• .number

  自动将用户的输入值转为数值类型

• .trim

  自动过滤用户输入的首尾空白字符

自定义组件的v-model

<template>
    <div><input :value="value" @input="onInput" /></div>
</template>

<script>
export default {
    name: "MyInput",
    props: {
        value: {
            type: String
        }
    },
    methods: {
        onInput(e) {
            this.$emit('input', e.target.value) //🚩这里传递一个参数e.target.value
            //🚩🚩this.$emit('input', e)
        }
    }
}
</script>

在引用这个自定义组件时，在🚩处需要注意：

<MyInput v-model="message" />

<MyInput :value="message" @input="message = $event" /> //这里的$event取决于🚩处的传参
//🚩🚩<MyInput :value="message" @input="message = $event.target.value" />