spyfu-vue-functional

Warning: This is not compatible with Vue 3.

Installation

This utility helps bind placeholder elements to functional Vue components.

# install through npm
$ npm install spyfu-vue-functional

# or with yarn
$ yarn add spyfu-vue-functional

Basic usage

Functional Vue components are simple render functions. This is useful, but it means the developer is responsible for attaching anything from the placeholder element. This utility exists to make doing this easier. To attach everything from the placeholder element, use the bindAll method.

import { bindAll } from 'spyfu-vue-functional';

export default {
    functional: true,
    render(h, context) {
        return <div { ...bindAll(context) }>
            Hello!
        </div>;
    },
};

Note: The above example uses JSX. To enable this syntax, see documentation here.

If you're only interested in binding part of the placeholder element, the following methods are also available.

• bindAttributes
• bindClasses
• bindDirectives
• bindDynamicClasses
• bindDynamicStyles
• bindEventListeners
• bindKey
• bindScopeId
• bindStaticClasses
• bindStaticStyles
• bindStyles

License

MIT

Copyright (c) 2017-present, SpyFu