- 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><template>
<p>Child component</p>
</template>
<script>
export default {
mounted() {
//имитируем задержку
setTimeout(() => {
this.$emit('load');
}, 2000);
}
}
</script><template>
<h1>Parent component</h1>
<child @load="onLoad"></child>
</template>
<script>
export default {
components: {
child: () => import('child.vue'),
},
methods: {
onLoad() {
console.log('Child loaded!');
}
}
}
</script>window.addEventListener('resize', this.h.bind(this));window.addEventListener('resize', () => this.h());new Vue({
el: '#app',
data: {
h: 0
},
methods: {
calcH() {
this.h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
}
},
created() {
this.calcH();
window.addEventListener('resize', this.calcH.bind(this));
}
});//mixin
var myMixin = {
data() {
return {
test: 'hello world'
}
}
}
new Vue({
mixins: [ myMixin ],
//..
});//где-то в компоненте
this.$root.test;//routes...
{
path: '*',
component: ...
}