i dont want to write a lot of import from.
import button1 from './components/button1'
import button2 from './componnets/button2'
import table1 from './componnets/table2'
...
Is there any good way to do it quickly?
How many way to do this thing？
following this pattern you can dynamically import components as well:
computed: {
comp () {
return () => import(`#/components/${this.componentName}.vue`)
}
}
and then use it like:
<template>
<component :is="comp"></component>
</template>
You could import and register the Vue Components globally in your index file:
import button1 from './components/button1'
Vue.component('button1', button1);
See the official documentation for more information: https://v2.vuejs.org/v2/guide/components-registration.html#Global-Registration
You may try require.context, look at the example in the official documentation, this should be enough to solve your problem. For more information about require.context, see this question.
Related
in vue documents I saw "Namespaced Components" in "script setup" guide it writes:
You can use component tags with dots like <Foo.Bar> to refer to components nested under object properties. This is useful when you import multiple components from a single file:
<script setup>
import * as Form from './form-components'
</script>
<template>
<Form.Input>
<Form.Label>label</Form.Label>
</Form.Input>
</template>
I wanted to know in this example what will the form-component look like, and what is the correct use case for such a component, does it have anything to do with "slot" or not.
In this case, form-components refers to a .js file that seems to be exporting single-file components (.vue).
form-components.js
export { default as Label } from './form-label.vue'
export { default as Input } from './form-input.vue'
You can then access these components via:
import * as Form from './form-components'
However, I recommend using a destructuring assignment methodology, as it is better interpreted by IDEs.
import { Input, Label } from './form-components'
In other to avoid multiple imports into my vuejs app I created an index.js file and imported all the files in it like so:
import AddMember from "./AddMember.vue";
import EditMember from "./EditMember.vue";
export {
AddMember,
EditMember,
};
Then in my component compenent I imported them like so:
import * as Members from "../members/index.js";
export default {
name: "members-table",
components: {
AddMember: Members.AddMember
EditMember: Members.EditMember,
},
}
The EditMember Component is a dialog that opens up per the member clicked. But Anytime I click on a member on a the table I get and error that looks like this: even though the name prop was defined in all the components.
Unknown custom element: <edit-member> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I resolved the problem my importing the EditMember.vue file itselfimport EditMember from './EditMember';. My question however, is there a way I can achieve this. Or better still what I'm I missing or did wrong.
well if it`s reusable components your trying to do so wouldnt it be better to create base components? and then you dont need to import them each time?
import { AddMember, EditMember } from "../members/index.js"; this should work like #Asimple said
Maybe you can try to import them separately?
Like this:
import { AddMember, EditMember } from "../members";
Update:
Changed import source, please, try it.
Working example here
Try this, you may need to create alias as:
components: {
'AddMember': Members.AddMember, // use single quotes
'EditMember': Members.EditMember,
},
I have a component that is dynamically loading based on the value of the variable "scene". The problem is I have to import and load all the possible scenes under the components, and I have a lot of different possible components. Is it possible for Vue to just dynamically import the passed in scene, or do I need to import everything at the start?
For other reasons, I would prefer not to use a router for this case.
<component
:is="scene"
v-bind="options"
>
</component>
=========
import TitleSceneComponent
from './scenes/common/TitleSceneComponent.vue';
import NarrationSceneComponent
from './scenes/common/NarrationSceneComponent.vue';
import ChoiceSceneComponent
from './scenes/common/ChoiceSceneComponent.vue';
components: {
TitleScene: TitleSceneComponent,
NarrationScene: NarrationSceneComponent,
ChoiceScene: ChoiceSceneComponent,
},
I am thinking that you can use a v-if that loads different components depending on the data passed.
<TitleSceneComponent v-if="booleanValueOrCondition" />
<ChoiceSceneComponent v-if="anotherBooleanValueOrCondition" />
This way components can be loaded depending on your conditions.
I would use vue router to something like this: https://router.vuejs.org/guide/#html
You can do this:
<component
:is="sceneComp"
v-bind="options"
>
</component>
=============================
computed: {
sceneComp() {
return () => import(`./scenes/common/${this.scene}Component.vue`);
}
I've inherited a Vue.js project that, among other things, has this:
import Multiselect from 'vue-multiselect';
<multiselect :multiple="true"
v-model="selectedTags"
:options="tagOptions"
label="title"
track-by="id"></multiselect>
Now, on the same page, we are also supposed to have a different multiselect object, imported from a different place, that looks like:
import Multiselect from './../../../../../../vendor/devcompany/scripts/vue/components/form/multiselect.vue';
<multiselect v-model="selectedTeacherIds"
:sortable="true"
:options="computedTeacherOptions">
<template slot="selected-option-value" slot-scope="{optionKey}">
{{teacherNames[optionKey]}}
</template>
Each of these works well individually, but I am supposed to somehow import both of them and use them both within the same component. Clearly this will not work without some sort of alteration to the code.
Is there some syntax to, perhaps, import as and thus change the name of one of the objects? Or do I need to go into the source code of one of them and change the naming there? The former (or some other solution not requiring changing the multiselect core files themselves) would be more desirable.
EDIT: This is what the code looks like more broadly.
import Multiselect from 'vue-multiselect';
import BbcodeEditor from './../elements/bbcode-editor';
import ApiVideoSelect from './api-video-select';
/* import other assets */
export default {
components: {ApiVideoClassDetail, ApiProgramCard, ApiUploader, Multiselect, Draggable, Datepicker, BbcodeEditor, ApiVideoSelect},
So I am wondering how to edit this syntax to add the other multiselect under a different name. I don't see how this could work:
import Multiselect from 'vue-multiselect';
import Multiselect from './../../../../../../vendor/frismedia/scripts/vue/components/form/multiselect.vue';
You do not have to change core files, just change the name while using the component:
import Multiselect from '....vue/components/form/multiselect.vue';
// your parent component
export default {
components: {
'my-custom-multiselect' : Multiselect
}
}
// in template:
<my-custom-multiselect> </my-custom-multiselect>
A simpler syntax: Change the name while importing
import MyCustomMultiselect from '....vue/components/form/multiselect.vue';
export default {
components: {
MyCustomMultiselect
}
}
// in template:
<my-custom-multiselect> </my-custom-multiselect>
I am using ElementUI for a Vue project, and I want to remove the label on pagination, but there is no attribute for this.
What would be the best way to remove the label on "pagination select"?
Here's the pagination!
https://imgur.com/YDrA2wj
Thanks in advance.
The label can not be easily removed because it's hard coded in the source code : https://github.com/ElemeFE/element/blob/4f93968db41899c235ad9e388eaf2ac052805cd3/packages/pagination/src/pagination.js#L189
One easy hackish way of solving your problem would be to override the i18n.
import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'
locale.el.pagination.pagesize = ''
Vue.use(Element, { locale })