- 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>