v-model
v-model是vue的语法糖，是对prop中value属性 和 input事件的封装。官方说明:一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突.
子组件实现
<template>
<div>
<input type="text" :value="value" @input="onInput">
</div>
</template>
<script>
export default {
name: 'Kinput',
props:{
value:{
type:String,
default:""
}
},
methods: {
onInput(e) {
this.$emit("input",e.target.value);
}
},
}
</script>
父组件 调用
<Kinput v-model="username"></Kinput>
自定义事件修饰符.sync实现
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。
子组件
<template>
<div>
<input type="text" :value="value" @input="onInput">
</div>
</template>
<script>
export default {
name: 'Kinput',
props:{
value:{
type:String,
default:""
}
},
methods: {
onInput(e) {
this.$emit("update:value",e.target.value);
}
},
}
</script>
父组件
<KinputSync :value.sync="username"></KinputSync>
.sync是现实一个弹窗
弹窗==>
父组件调用
