Vue – 双向绑定 v-model 基本用法

v-model

vue 提供了v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

注意：v-model 指令只对表单类元素有意义，如 input textarea select 等等

利用 v-model 向父组件传值

我们知道，父向子传值可以通过 v-bind 的方式向子组件传值，但 v-bind 是单向传值，子组件和使用 props 接收的数据只读不能修改，并报错，但父组件可以使用 v-model 方式双向绑定从而实现子向父传值。

emits 自定义属性[3.0]

emit 属性是用于接收来自父组件的 v-model 参数。

<my-component v-model:number="count"></my-component>

当父组件调用子组件并用 v-model 时，props 属性接收参数后，可以使用 emits 属性定义更改方法，固定写法是‘update:xxx’.

emits:[ 'update : number' ]

调用 this.$emit() 方法，修改 number 值，从而使父组件的 count 值改变，实现子组件向父组件传递数据

methods:{
   foo(){
       this.$emit('update : number' , this.number + 1)
    }
}

也可以接收 v-on 的值

<my-component @number="setCount"></my-component>

methods:{
    setCount(foo){
        this.count += foo
     }
}

子组件使用 emit 接收参数，并用 this.$emit() 来传值

emits:['number']

this.$emit('number' , 1 )