Vue Messenger
A series of useful enhancements to Vue components props:
- Transform props
- Enum-type props
- Numeric-type props
- Listen for receiving props
- Two-way data binding props
Install
Package
# yarn yarn add vue-messenger # or, npm npm i vue-messenger --save
CDN
Available as global VueMessenger
.
Usage
Install mixin
Globally
// main.js Vue
Locally
// Component.vue mixins: Messenger // ...
Transform props
To transform a prop, add a transform: value => transformedValue
function to its descriptor, and use this.local${PropName}
to get transformed prop. e.g.
😑 before
{{ normalizedMessage }}
😀 after
{{ localMessage }}
Enum-type props
To define a enum-type prop, add a enum
array to its descriptor, and its default
value will be enum[0]
if the descriptor doesn't contain default
attribute. e.g.
😑 before
props: size: type: String default: 'small' 'small' 'large' >= 0
😀 after
props: size: type: String enum: 'small' 'large'
Numeric-type props
To define a numeric-type prop, add numeric: true
to its descriptor. Besides, you can set infinite
to ture
to allow infinite numbers, which are -Infinity
and Infinity
. e.g.
😑 before
props: count: type: Number String default: 0 ! max: type: Number String default: Infinity value === Infinity || ! }
😀 after
props: count: numeric: true default: 0 max: numeric: true infinite: true default: Infinity
Listen for receiving props
To listen for receiving a prop, add on: { receive: (newValue, oldValue) => void }
object to its descriptor. e.g.
😑 before
props: count: Number String watch: count: immediate: true { console }
😀 after
props: count: type: Number String on: { console }
Two-way data binding props
To apply two-way data bindings on a prop, add sync: true
to its descriptor. Then, you can use this.local${PropName} = newValue
or this.send${PropName}(newValue)
to send new value to Parent component.
If the prop is model prop, it's no need to add
sync: true
to its descriptor.
😑 before
<!-- // Parent.vue --> <!-- // Child.vue -->
😀 after
<!-- // Parent.vue --> <!-- // Child.vue -->