I have two js file students.js and modal.js . How to import component in modal.js inside students.js? my students.js
Vue.component('student', {
data: function(){
},
template:`
<h1>Click to edit students</h1>
// use modals.js component here..........
`
})
my modals.js
Vue.component('modal', {
template:`
<h1>This is modal.</h1>`
})
Vue.component globally registers the component so you can use it directly in any other component. Like this:
Vue.component('student', {
data: function(){
},
template:`
<h1>Click to edit students</h1>
// use modals.js component here..........
<modal v-bind:prop="something">....</modal> // <= focus here
`
})
Note: Name your components according to style guide; names like modal is not suitable according to style guide, name it like my-modal where - should be in component name.
You can use import. For more information : https://v2.vuejs.org/v2/guide/components-registration.html
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}
