"vue": "2.5.2",
"vue-loader": "15.4.2",
"webpack": "4.26.1",
// A.vue
export let a = 1
export default {
name: 'a',
data()(),
}
// B.vue
import A, { a } from './A.vue'
import A successfully;
But: "export 'a' was not found in './A.vue'
It must be because a let variable only works in the scope where is declared, try with a const as in:
export const a = 1
In ES6, export default is to export a single value (or function). If you need to export several things from your module, use named exports. Check the MDN doc
export A {
name: 'a',
data()(),
}
export let a=2
///in B.vue
import {A, a} from './A.vue'
I'm not sure that's the best approach though, I guess a Vue component should only export the component itself. And if you need another value, create a different module in a .js file somewhere. And if you need to share state between your components, use VueX instead.
Related
i would like to create a global mixin that is in a seperate file. all the tutorial i have seen online always place the mixin into the same file, or don't explain how to import another file.
mixins don't really make sense if they are all in the same file, so there has to be some way to load them from a different file, right?
here is my test mixin_test.js:
export default mixin_test = {
methods: {
test: function( msg )
{
console.log( msg );
}
}
}
in the app.js i have the following:
...
import mixin_test from "./mixin_test.js";
...
and in my component:
export default {
name:"something",
mixins: [mixin_test],
mounted(){
this.test( "hello world" );
}
}
if i open the page in a web browser i get the error message:
Uncaught ReferenceError: assignment to undeclared variable mixin_test
does anyone have any idea what the issue is?
default export isn't the same as named export and doesn't need to be specified with a name. default export is an expression. export default mixin_test = ... is the same as console.log(mixin_test = ...), this results in assigning to non-existent mixin_test variable.
It should be either:
export default {...}
Or:
const mixin_test = {...}
export default mixin_test;
I use Vue 3 and I have a dynamic component. It takes a prop called componentName so I can send any component to it. It works, kind of.
Part of the template
<component :is="componentName" />
The problem is that I still need to import all the possible components. If I send About as a componentName I need to import About.vue.
Part of the script
I import all the possible components that can be added into componentName. With 30 possible components, it will be a long list.
import About "#/components/About.vue";
import Projects from "#/components/Projects.vue";
Question
It there a way to dynamically import the component used?
I already faced the same situation in my template when I tried to make a demo of my icons which are more than 1k icon components so I used something like this :
import {defineAsyncComponent,defineComponent} from "vue";
const requireContext = require.context(
"#/components", //path to components folder which are resolved automatically
true,
/\.vue$/i,
"sync"
);
let componentNames= requireContext
.keys()
.map((file) => file.replace(/(^.\/)|(\.vue$)/g, ""));
let components= {};
componentNames.forEach((component) => { //component represents the component name
components[component] = defineAsyncComponent(() => //import each component dynamically
import("#/components/components/" + component + ".vue")
);
});
export default defineComponent({
name: "App",
data() {
return {
componentNames,// you need this if you want to loop through the component names in template
};
},
components,//ES6 shorthand of components:components or components:{...components }
});
learn more about require.context
I have a class and method that I need to import globally, so that I could avoid importing it again in each Vue file. I usually import my own class and method in each Vue file like this:
// in myFunc.js
export const fn = {
myFunc: function(param) { alert(param) }
}
// then I use it like this
import {fn} from '#/assets/js/myFunc.js';
fn.myFunc('Lorem ipsum');
In main.js, I tried the following code, which does not work:
import {fn} from '#/assets/js/myFunc.js';
Vue.mixin({
components: { fn },
})
How do I import the class/methods globally?
import Vue from 'vue'
import { fn } from '#/assets/js/myFunc.js';
Vue.prototype.$fn = fn
And then in your component.
this.$fn.myFunc()
Adding Instance Properties.
There may be data/utilities you’d like to use in many components, but
you don’t want to pollute the global scope. In these cases, you can
make them available to each Vue instance by defining them on the
prototype.
I have a single file component with some data:
data () {
return {
myArray: [obj1,obj2,...obj10000]
}
}
Is it a good idea to have 10000 objects in the data array? If not, how can I import the large array in the single file component?
You can create it in a separate file and import to component.
const animals = [ //animals.js
{name:"tiger", weight:120},
{name:"elephant", weight:1000}
]
export default animals
In component
import animals from './path/to/animals.js'
export default {
data() {
return {
animals: animals
}
},
I found that use a separate json file is a good idea.
Simply create a seperate file in your folder structure under /src /components or wherever.
You shall have two files
data.js / data.json
ComponentName.vue
data.js file, could also be a data.json file.
export const data = [{},{},{}]
export default data;
To import use in any vue component ----
<template></template>
<script>
import data from './components/data'
*// in case folder structure is different use " ../ or ./ "*
</script>
Isn't it possible to extend the template of an imported component installed via NPM?
I've tried this, but doesn't work.
import Foo from 'Foo'
export default {
extends: Foo,
template: `<p>foo</p>`
}
The .vue files export components definition only, so you are able to do something like this:
import Foo from 'Foo'
var Bar = {
// inherit everything from Foo
mixins: [Foo],
// rewrite the template
template: `<div>` + Foo.template + `</div>`
}
export default Bar
Keep in mind that Foo is just an object, it is just the definition of the component like the one you export in your own components, so you may feel free to use all it's options, but if you modify them you affect their usage in whole project. Think twice when doing things like:
Foo.template = `<div>${Foo.template}</div>`