An open API service indexing awesome lists of open source software.

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.

Awesome Lists containing this project

README

          

# vue-merge-data

[![npm](https://img.shields.io/npm/v/vue-merge-data.svg?style=for-the-badge)](https://npm.im/vue-merge-data)
[![npm downloads](https://img.shields.io/npm/dt/vue-merge-data.svg?style=for-the-badge)](https://npm.im/vue-merge-data)
[![Travis](https://img.shields.io/travis/fjc0k/vue-merge-data.svg?style=for-the-badge)](https://travis-ci.org/fjc0k/vue-merge-data)
[![minified size](https://img.shields.io/badge/minified%20size-976%20B-blue.svg?MIN&style=for-the-badge)](https://github.com/fjc0k/vue-merge-data/blob/master/dist/vue-merge-data.min.js)
[![minzipped size](https://img.shields.io/badge/minzipped%20size-562%20B-blue.svg?MZIP&style=for-the-badge)](https://github.com/fjc0k/vue-merge-data/blob/master/dist/vue-merge-data.min.js)
[![license](https://img.shields.io/github/license/fjc0k/vue-merge-data.svg?style=for-the-badge)](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' }`