- Component
-- Component.vue
-- Component.js
-- Component.scss
<template>
<div>my component</div>
</template>
<script src="./Component.js"></script>
<style lang="scss" src="./Component.scss">
const requireComponents = {};
const requireComponentContext = require.context('./', false, /\.vue$/i, 'lazy'); //lazy!
requireComponentContext.keys().forEach((fileName, index) => {
//componentName может быть по названию файла, смотрите пример в документации.
const componentName = `MySuperComponent-${index + 1}`;
const componentConfig = requireComponentContext(fileName);
requireComponents[componentName] = () => componentConfig;
});
//vue instance
export default {
components: {
...requireComponents
}
}
<my-super-component-1></my-super-component-1>
<my-super-component-2></my-super-component-2>
...
{
components: {
Render: {
functional: true,
render: (h, ctx) => ctx.props.vnode
}
}
}
<div class="header">
<render :vnode="$slots.menu"></render>
</div>
<div class="fixed-header">
<render :vnode="$slots.menu"></render>
</div>