v-model
v-model的本质是 :value和@input="test=$event.target.value"的语法糖
- 修饰符
v-model.lazy 事件触发后将输入框的值与数据进行同步 添加lazy 转变为与change事件同步(焦点移除时触发)
v-model.trim 去除字符串收尾的空格
v-model.number 将输入转化为数值类型
//父组件
<div>
<button>{{count}}</button>
<my-component v-model="count"></my-component>
</div>
// 子组件
<template>
<div>
<input type="text" :value="value" />
<button @click="handleClick">点击</button>
</div>
</template>
<script>
export default {
name: "default1",
props: ["value"],
data () {
return {
count: 1,
}
},
methods: {
handleClick () {
this.$emit("input", 2) //("input",$event)
}
}
}
- 自定义事件
在使用v-model的时候只能使用一次,对其他数据进行双向绑定的时候需要 子->父,父->子组件间传值,比较麻烦。此时可以使用修饰符 .sync
父组件: :formData.sync='formData'
子组件: this,$emit('update:formData',{})