Vue – 双向绑定 v-model 基本用法
v-model
vue 提供了v-model 双向数据绑定指令,用来辅助开发者在不操作 DOM 的前提下,快速获取表单的数据。
修饰符
为了方便对用户输入的内容进行处理,vue 为 v-model 指令提供了 3 个修饰符,分别是:
修饰符 | 作用 | 示例 |
.number | 自动将用户的输入值转为数值类型 | <input v-model.number="age" /> |
.trim | 自动过滤用户输入的首尾空白字符 | <input v-model.trim="msg" /> |
.lazy | 在“change”时而非“input”时更新 | <input v-model.lazy="msg" /> |
注意: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 )
共有 0 条评论