Given I have two imports:
import { createDevTools } from 'redux-devtools';
import LogMonitor from 'redux-devtools-log-monitor';
What is the difference between these two?
I understand that LogMonitor is the "default" export, and that the bracketed import can import several different exports at once in a comma delimited list. However, is there some difference in the usage?
I feel like I am missing some fundamental.
However, is there some difference in the usage?
No. Default and named imports/exports can have any JavaScript value. It really just depends on how the module you are importing is organized.
import { createDevTools } from 'redux-devtools';
is a shorthand for:
import DevTools from 'redux-devtools';
const createDevTools = DevTools.createDevTools;
So your going directly to the property of your default export object.
If still, someone is looking for further details with simple example. Look at the MDN web docs
The import statement is used to import bindings which are exported by
another module. Imported modules are in strict mode whether you
declare them as such or not. The import statement cannot be used in
embedded scripts unless such script has a type="module"
import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";
Related
I'm trying to import multiple components from a folder conditionally. The first example works, but I need to get it working conditionally like in the last example that doesn't work. Otherwise I'd have to always go and change which components should import manually, after adding one to the project folder.
I've also tried wrapping the imports into a function, but I can't get the import * as components syntax to work. Importing one component works fine, but not with * return () => import * as components '#/components/index'
This works
import * as components from '#/components/index'
export default {
components: {
...loadedComponents
}
}
index.js and electronIndex.js
export {
default as one
}
from './One.vue'
export {
default as two
}
from './Two.vue'
This of course doesn't work, but demonstrates what I need
I also tried importing conditionally via functions like stated above, but can't get that to work either.
const IPC = window.ipcRenderer
if (IPC) {
import * as components from '#/components/electronIndex'
} else {
import * as components from '#/components/index'
}
export default {
components: {
...loadedComponents
}
}
i am using expo to build a app.
here,
`import * as SQLite from 'expo-sqlite';
const db = SQLite.openDatabase("db.db");
is not working while
import { SQLite } from "expo-sqlite"; is working.
when i use the first method, it is getting SQLite.openDatabase is not a function error.
actually what is the difference with these? anyone have an idea?
When you do import * as SQLite from 'expo-sqlite'; you are actually importing all the modules from the expo-sqlite by writing * as SQLite , and its stored as SQLite variable which then you are using to create an openDatabase.
But when you do import { SQLite } from "expo-sqlite"; you are only importing the SQLite module from the expo-sqlite package. And after that you are using it to create a database.
Basically its like sometimes in some file you have multiple functions like suppose App.js
export const add =() => {
}
export const bol = () => {
}
Then suppose in Home.js you need to import ,
So if you want only the add function then you will do
import {add} from 'App.js'
or you want both so <
import {add,bol} from 'App.js'
and another way of importing both is by
import * as Func from 'App.js'
And now you can access each by Func.add and Func.bol
Hope it helps. feel free for doubts
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.
Vue.js : how to load dependent components?
From router currently using component as follows:
import A from './A';
export default {
components : {
'new-comp-A' : NewCompA
}
}
...
But this renders the template before import causing errors. Is there a better way for loading dependencies?
The template uses the - did you register the component correctly.
Your casing is incorrect. Use either 'NewCompA' or 'new-comp-a' for the name.
In fact, it would be even easier to use
import NewCompA from 'wherever/the/component/is/defined'
export default {
components: {
NewCompA
}
}
Your template can then use either
<NewCompA></NewCompA>
<!-- or -->
<new-comp-a></new-comp-a>
See https://v2.vuejs.org/v2/guide/components-registration.html#Name-Casing
After looking at your code again, it does not seem normal. You are assigning the variable A to your component, but trying to import it with the variable NewCompA..
You need to change the following:
From this:
import A from './A';
export default {
components : {
'new-comp-A' : NewCompA
}
}
...
To this:
import A from './A';
export default {
components : {
'NewCompA' : A
}
}
...
and use it like this:
<new-comp-a>
I have the following Single File Component in Vue.js.
The plasmid tag is meant to get rendered by the angularplasmid.complete.min.js file but isn't for some reason. Is this the correct way to import a library in a component?
I am restructuring an old Vue project to be better designed but I know that the plasmid tag renders on here (which doesn't use single file components): https://github.com/asselinpaul/dnaviewer/blob/master/app/index.html
Any help much appreciated.
<template>
<div id="DNA Plasmid">
<h3>Plasmid Visualisation</h3>
<div class="section">
<plasmid id='p1' plasmidheight="800" plasmidwidth="800" v-bind:sequencelength="sequenceLength">
<plasmidtrack id='t1' radius="200" width="55">
<trackmarker v-for="(bound, index) in bounds" class='marker' v-bind:start="bound.start" v-bind:end="bound.end" v-bind:style="{ fill: bound.color }" v-bind:key="bound.start">
<markerlabel v-bind:text="bound.name" v-bind:vadjust='bound.vadjust' style='font-size:12px'></markerlabel>
</trackmarker>
<tracklabel v-bind:text="name" style='font-size:25px;font-weight:bold'></tracklabel>
</plasmidtrack>
</plasmid>
</div>
</div>
</template>
<script>
import './angularplasmid.complete.min.js'
...
Solved by requiring the file when my component is mounted:
mounted: function(){
require('./angularplasmid.complete.min.js')
}
You definitely can't reasonably combine angular functions with Vue. Plus, angular use its own dependency system.
Beside, you can use import in a single-file component exactly the same way than in any script. But of course be sure that your imported script is actually exporting something (or is relevant to execute as a module, which is probably not the case here).
Here is a reminder of the syntax:
import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Note that the commonJS require() and module.exports are also perfectly fine in a single-file component.