vue-merge-data

0.2.1 • Public • Published

vue-merge-data

npm npm downloads Travis minified size minzipped size license

Intelligently merge data for Vue render functions.

yarn add vue-merge-data

CDN: jsDelivr | UNPKG (Avaliable as window.VueMergeData)

Usage

First, import it:

import mergeData from 'vue-merge-data'

Then, use it in Vue render functions:

// 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' }

Package Sidebar

Install

npm i vue-merge-data

Weekly Downloads

17

Version

0.2.1

License

MIT

Unpacked Size

15.6 kB

Total Files

8

Last publish

Collaborators

  • funch