\n\n# Vue Messenger\n\nA series of useful enhancements to Vue components props:\n\n- [Transform props](#transform-props)\n- [Enum-type props](#enum-type-props)\n- [Numeric-type props](#numeric-type-props)\n- [Listen for receiving props](#listen-for-receiving-props)\n- [Two-way data binding props](#two-way-data-binding-props)\n\n## Install\n\n### Package\n\n```bash\n# yarn\nyarn add vue-messenger\n\n# or, npm\nnpm i vue-messenger --save\n```\n\n### CDN\n\n- [jsDelivr](//www.jsdelivr.com/package/npm/vue-messenger)\n- [UNPKG](//unpkg.com/vue-messenger/dist/)\n\nAvailable as global `VueMessenger`.\n\n## Usage\n\n### Install mixin\n\n#### Globally\n\n```js\n// main.js\nimport Vue from 'vue'\nimport Messenger from 'vue-messenger'\n\nVue.mixin(Messenger)\n```\n\n#### Locally\n\n```js\n// Component.vue\nimport Messenger from 'vue-messenger'\n\nexport default {\n mixins: [Messenger],\n // ...\n}\n```\n\n### Transform props\n\nTo transform a prop, add a `transform: value => transformedValue` function to its descriptor, and use `this.local${PropName}` to get transformed prop. e.g.\n\n#### 😑 before\n\n```html\n\n
{{ normalizedMessage }}
\n\n\n\n```\n\n#### 😀 after\n\n```html\n\n
{{ localMessage }}
\n\n\n\n```\n\n### Enum-type props\n\nTo 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.\n\n#### 😑 before\n\n```js\nexport default {\n props: {\n size: {\n type: String,\n default: 'small',\n validator: value => ['small', 'large'].indexOf(value) >= 0\n }\n }\n}\n```\n\n#### 😀 after\n\n```js\nexport default {\n props: {\n size: {\n type: String,\n enum: ['small', 'large']\n }\n }\n}\n```\n\n### Numeric-type props\n\nTo 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.\n\n#### 😑 before\n\n```js\nexport default {\n props: {\n count: {\n type: [Number, String],\n default: 0,\n validator: value => !isNaN(value - parseFloat(value))\n }\n },\n max: {\n type: [Number, String],\n default: Infinity,\n validator: value => value === Infinity || !isNaN(value - parseFloat(value))\n }\n }\n}\n```\n\n#### 😀 after\n\n```js\nexport default {\n props: {\n count: {\n numeric: true,\n default: 0\n },\n max: {\n numeric: true,\n infinite: true,\n default: Infinity\n }\n }\n}\n```\n\n### Listen for receiving props\n\nTo listen for receiving a prop, add `on: { receive: (newValue, oldValue) => void }` object to its descriptor. e.g.\n\n#### 😑 before\n\n```js\nexport default {\n props: {\n count: [Number, String]\n },\n watch: {\n count: {\n immediate: true,\n handler(newCount, oldCount) {\n console.log(newCount, oldCount)\n }\n }\n }\n}\n```\n\n#### 😀 after\n\n```js\nexport default {\n props: {\n count: {\n type: [Number, String],\n on: {\n receive(newCount, oldCount) {\n console.log(newCount, oldCount)\n }\n }\n }\n }\n}\n```\n\n### Two-way data binding props\n\nTo 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.\n\n> If the prop is model prop, it's no need to add `sync: true` to its descriptor.\n\n#### 😑 before\n\n```html\n\n\n \n\n\n\n\n\n\n
![\"Vue](\"./images/logo.png\"){kind=logo}
![\"Build](\"https://travis-ci.org/fjc0k/vue-messenger.svg?branch=master\")
\n ![\"Coverage](\"https://codecov.io/gh/fjc0k/vue-messenger/branch/master/graph/badge.svg\"){kind=icon}
\n ![\"Minified](\"https://img.shields.io/badge/minzipped%20size-2.37%20KB-blue.svg?MIN\"){kind=icon}
\n ![\"Minzipped](\"https://img.shields.io/badge/minified%20size-1.11%20KB-blue.svg?MZIP\"){kind=icon}
\n ![\"Version\"](\"https://img.shields.io/npm/v/vue-messenger.svg\")
\n ![\"License\"](\"https://img.shields.io/npm/l/vue-messenger.svg\")
\n