vue 组件中的 model: 允许自定义组件在使用 v-model 时定制 prop 和 event
2018-10-13 14:41
806 查看
[code]<my-checkbox v-model="foo" value="some value"></my-checkbox> Vue.component('my-checkbox', { model: { prop: 'checked', event: 'change' }, })
[code]Vue.component('my-checkbox', { model: { prop: 'checked', 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` checked: { type: Number, default: 0 } }, // ... })[code]<my-checkbox v-model="foo" value="some value"></my-checkbox>
以上代码等价于:
[code]<my-checkbox :checked="foo" @change="val => { foo = val }" value="some value"> </my-checkbox>不简写:
[code]<my-checkbox v-bind:checked="foo" v-on:change="function(val) {return foo = val }" value="some value"> </my-checkbox>
例子解析:
[code] <my-checkbox v-model="foo" value="some value"></my-checkbox>[code] model: { prop: 'checked', event: 'change' },
同时使用 v-model="foo" 和 model: { prop: 'checked', event: 'change' }, 获得相关联后,相当于
<my-checkbox
v-bind:checked="foo" (因为 v-model 会默认绑定 checkbox 的 value 或 checked 值);
v-on:change="function(val) { return foo = val } (因为v-model 绑定的是value/checked 值。v-model="foo", 相当于 v-on 把 model 里的 change 事件和 value/checked="foo" 这个函数绑定在一起了 )>
</my-checkbox>
总结:
自定义元素上使用 v-model="theFunction", 同时,组件里使用 model {prop:xxx, event:xxx}
可以把 model 里面定义的 prop 和event 自动绑定在 "theFuntion" 这个自定义事件上
阅读更多
相关文章推荐
- vue 自定义组件使用v-model
- vue如何在自定义组件中使用v-model
- 使用vue的v-model自定义 checkbox组件
- Vue 自定义组件使用v-model
- Vue 自定义组件使用v-model
- 自定义vue全局组件use使用
- [Android]自定义组件示例:使用attrs.xml文件定制RadioButton
- vue--自定义全局方法,在组件里面使用
- 详解VUE自定义组件中用.sync修饰符与v-model的区别
- 自定义vue全局组件use使用、vuex的使用详解
- 使用Vue自定义数字键盘组件(体验度极好)
- 浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
- Vue------第五天(关于组件的一些基础了解,包括组件的注册、Prop、自定义事件、使用插槽分发内容等)
- Vue编写自定义组件的时候使用v-for报错
- 浅析Vue自定义组件的v-model
- Vue EventBus自定义组件事件传递
- 浅谈 Vue v-model指令的实现原理 - 如何利用v-model设计自定义的表单组件
- vue2.x自定义组件上使用v-model指令
- vue--自定义全局方法,在组件里面使用
- Vue组件中prop属性使用说明实例代码详解