Vue中用v-model实现父组件和子组件之间的数据通信
在Vue中实现父子组件之间的数据通信,除了用传统的Props/emit还有sync外,还能使用v-model来实现(2.2.0 新增)。类型:{ prop?: string, event?: string }model允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作...
·
在Vue中实现父子组件之间的数据通信,除了用传统的Props/emit还有sync外,还能使用v-model来实现(2.2.0 新增)。
类型:{ prop?: string, event?: string }
model允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
//parent
<my-checkbox v-model="foo" value="some value"></my-checkbox>
//children
Vue.component('my-checkbox', {
model: {
prop: 'counter',
event: 'change'
},
props: {
// this allows using the `value` prop for a different purpose
value: String,
// use `checked` as the prop which take the place of `value`
counter: {
type: Number,
default: 0
}
},
methods:{
fn(){
this.$emit('change', this.counter+2)
}
},
template: '<button @click="fn()">add counter</button>'
// ...
})
上面的代码相当于
<my-checkbox
:counter="foo"
@change="val => { foo = val }"
value="some value">
</my-checkbox>
更多推荐
已为社区贡献1条内容
所有评论(0)