https://github.com/fjc0k/vue-merge-data
Intelligently merge data for Vue render functions.
https://github.com/fjc0k/vue-merge-data
data merge-data render-functions vue
Last synced: about 2 months ago
JSON representation
Intelligently merge data for Vue render functions.
- Host: GitHub
- URL: https://github.com/fjc0k/vue-merge-data
- Owner: fjc0k
- License: mit
- Created: 2018-04-14T03:18:29.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-05-17T07:44:15.000Z (over 7 years ago)
- Last Synced: 2025-03-18T16:05:42.369Z (7 months ago)
- Topics: data, merge-data, render-functions, vue
- Language: JavaScript
- Homepage: https://npm.im/vue-merge-data
- Size: 249 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-merge-data
[](https://npm.im/vue-merge-data)
[](https://npm.im/vue-merge-data)
[](https://travis-ci.org/fjc0k/vue-merge-data)
[](https://github.com/fjc0k/vue-merge-data/blob/master/dist/vue-merge-data.min.js)
[](https://github.com/fjc0k/vue-merge-data/blob/master/dist/vue-merge-data.min.js)
[](https://github.com/fjc0k/vue-merge-data/blob/master/LICENSE)Intelligently merge data for Vue render functions.
```shell
yarn add vue-merge-data
```CDN: [jsDelivr](//www.jsdelivr.com/package/npm/vue-merge-data) | [UNPKG](//unpkg.com/vue-merge-data/) (Avaliable as `window.VueMergeData`)
## Usage
First, import it:
```javascript
import mergeData from 'vue-merge-data'
```Then, use it in Vue render functions:
```javascript
// Normal component
export default {
name: 'primary-button',
props: { mini: Boolean },
render(h) {
return h('base-button', mergeData(this.$vnode.data, {
attrs: {
type: 'primary',
mini: this.mini
},
on: {
click: () => {}
}
}), this.$slots.default)
}
}// Functional component
export default {
name: 'primary-button',
functional: true,
props: { mini: Boolean },
render(h, { props, data, children }) {
return h('base-button', mergeData(data, {
attrs: {
type: 'primary',
mini: props.mini
},
on: {
click: () => {}
}
}), children)
}
}
```## Merging strategies
Prop(s) | Strategy | Example
--|--|---
staticClass | append | target: `{ staticClass: 'button' }`
source: `{ staticClass: 'button--mini' }`
result: `{ staticClass: 'button button--mini' }`
attrs, domProps, scopedSlots, staticStyle, props, hook, transition | override | target: `{ attrs: { type: 'reset' } }`
source: `{ attrs: { type: 'submit' } }`
result: `{ attrs: { type: 'submit' } }`
class, style, directives, on, nativeOn | expand | target: `{ class: 'button', on: { click: FN1 } }`
source: `{ class: { mini: true }, on: { click: FN2 } }`
result: `{ class: ['button', { mini: true }], on: { click: [FN2, FN1] } }`
others: slot, key... | override | target: `{ slot: 'icon' }`
source: `{ slot: 'image' }`
result: `{ slot: 'image' }`