https://github.com/fjc0k/vue-messenger
A series of useful enhancements to Vue component props.
https://github.com/fjc0k/vue-messenger
two-way-bindings vue vue-messenger
Last synced: 5 months ago
JSON representation
A series of useful enhancements to Vue component props.
- Host: GitHub
- URL: https://github.com/fjc0k/vue-messenger
- Owner: fjc0k
- License: mit
- Created: 2018-05-04T14:08:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-24T01:54:18.000Z (over 7 years ago)
- Last Synced: 2025-06-26T17:52:10.366Z (6 months ago)
- Topics: two-way-bindings, vue, vue-messenger
- Language: JavaScript
- Homepage: https://npm.im/vue-messenger
- Size: 447 KB
- Stars: 48
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue - vue-messenger - A series of useful enhancements to Vue component props. ` ๐ 3 years ago` (Utilities [๐](#readme))
- awesome-vue-zh - Vueไฟกไฝฟ - ๅฏนVue็ปไปถ้ๅ ท็ไธ็ณปๅๆ็จ็ๆน่ฟ: ่ฝฌๆขใกๆไธพ็ฑปๅใกๆฐๅผ็ฑปๅใกๅๅๆฐๆฎ็ปๅฎ. (ๅ ฌ็จไบไธ / ๆ)
- awesome-vue - vue-messenger - A series of useful enhancements to Vue component props: Transform, Enum-type, Numeric-type, Two-way data bindings. (Components & Libraries / Utilities)
- awesome-vue - vue-messenger โ 20 - A series of useful enhancements to Vue component props: Transform, Enum-type, Numeric-type, Two-way data bindings. (Utilities / Miscellaneous)
- awesome-vue - vue-messenger - A series of useful enhancements to Vue component props: Transform, Enum-type, Numeric-type, Two-way data bindings. (Utilities / Miscellaneous)
README
# Vue Messenger
A series of useful enhancements to Vue components props:
- [Transform props](#transform-props)
- [Enum-type props](#enum-type-props)
- [Numeric-type props](#numeric-type-props)
- [Listen for receiving props](#listen-for-receiving-props)
- [Two-way data binding props](#two-way-data-binding-props)
## Install
### Package
```bash
# yarn
yarn add vue-messenger
# or, npm
npm i vue-messenger --save
```
### CDN
- [jsDelivr](//www.jsdelivr.com/package/npm/vue-messenger)
- [UNPKG](//unpkg.com/vue-messenger/dist/)
Available as global `VueMessenger`.
## Usage
### Install mixin
#### Globally
```js
// main.js
import Vue from 'vue'
import Messenger from 'vue-messenger'
Vue.mixin(Messenger)
```
#### Locally
```js
// Component.vue
import Messenger from 'vue-messenger'
export default {
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
```html
{{ normalizedMessage }}
export default {
props: {
message: [Number, String]
},
computed: {
normalizedMessage() {
return String(this.message).trim().replace(/@/g, '(a)')
}
}
}
```
#### ๐ after
```html
{{ localMessage }}
export default {
props: {
message: {
type: [Number, String],
transform: message => String(message).trim().replace(/@/g, '(a)')
}
}
}
```
### 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
```js
export default {
props: {
size: {
type: String,
default: 'small',
validator: value => ['small', 'large'].indexOf(value) >= 0
}
}
}
```
#### ๐ after
```js
export default {
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
```js
export default {
props: {
count: {
type: [Number, String],
default: 0,
validator: value => !isNaN(value - parseFloat(value))
}
},
max: {
type: [Number, String],
default: Infinity,
validator: value => value === Infinity || !isNaN(value - parseFloat(value))
}
}
}
```
#### ๐ after
```js
export default {
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
```js
export default {
props: {
count: [Number, String]
},
watch: {
count: {
immediate: true,
handler(newCount, oldCount) {
console.log(newCount, oldCount)
}
}
}
}
```
#### ๐ after
```js
export default {
props: {
count: {
type: [Number, String],
on: {
receive(newCount, oldCount) {
console.log(newCount, oldCount)
}
}
}
}
}
```
### 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
```html
import Child from './Child.vue'
export default {
components: { Child },
data: () => ({
value: String,
visible: Boolean
})
}
export default {
props: {
value: String,
visible: Boolean
},
computed: {
curValue: {
get() {
return this.value
},
set(newValue) {
if (newValue === 'hide') {
this.curVisible = false
}
this.$emit('input', newValue)
}
},
curVisible: {
get() {
return this.visible
},
set(newVisible) {
this.$emit('update:visible', newVisible)
}
}
}
}
```
#### ๐ after
```html
import Child from './Child.vue'
export default {
components: { Child },
data: () => ({
value: String,
visible: Boolean
})
}
export default {
props: {
value: {
type: String,
on: {
change(value) {
if (value === 'hide') {
this.localVisible = false
}
}
}
},
visible: {
type: Boolean,
sync: true
}
}
}
```