官网详解
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
- 先看一个v-model例子，v-model就是v-on和v-bind组成的语法糖。v-bind就是把值传入组件，v-on出发方法重新赋值实现数据双向绑定
<input v-model="name2" />
等价于
<input :value="name2" @input="(e) => (name2 = e.target.value)" />
或者
<input v-bind:value="name2" v-on:input="(e) => (name2 = e.target.value)" />
- 在自定义组件里面的写法
父组件
<my-component v-model="name1"></my-component>
子组件
<template>
<div>
<input :value="name1" type="text" @input="inputChange" />
</div>
</template>
<script>
export default {
name: 'myComponent',
model: {
prop: 'name1'
},
props: {
name1: {
type: String,
default: ''
}
},
data() {
return {
name2: '22'
}
},
methods: {
inputChange(e) {
this.nam1 = e.target.value
this.$emit('input', e.target.value)
}
}
}
</script>
在子组件中使用model，自定义子组件的event和prop，event可以自定义，要和emit出去的一致。在input中可以不用自定义event。model里面的prop是自定义的属性值，props里面接受重新命名的参数。就是父组件传入的v-model绑定的值。
model: {
prop: 'name',
event:'xxx'
},
props:{
name:{
type:String
}
}
this.$emit('xxx', 'emit出去的值')
