This article mainly introduces the analysis of the process of VUE registration global components and local components. The example code is introduced in this article in detail, which has certain reference learning value for everyone's learning or work. Friends who need it can refer to it.
Global Components
Step 1: Create a subfile in the components folder
<template>
<div class="users">
{{msg}}
</div>
</template>
<script>
export default {
name: 'users',
data () {
return {
msg: 'username'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
Step 2: Do global registration in
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// The first step of global configuration component Users is the name of the folderimport Users from './components/Users'
= false
// The second part of the global registration component is('users',Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
Step 3: Reference in the corresponding file
<template>
<div >
<!-- <router-view/>It's a subroutine view -->
<!-- <router-view/> -->
<p>{{title}}</p>
<users></users>
</div>
</template>
<script>
export default {
name: 'App',
data(){
return{
title:"users is the instantiated name of the global component"
}
}
}
</script>
<style>
</style>
Local components
Create a new subcomponent file in the components folder and then reference it in the corresponding file.
<template>
<div >
<!-- <router-view/>It's a subroutine view -->
<!-- <router-view/> -->
<p>{{title}}</p>
<users></users>
</div>
</template>
<script>
/*Local Registration Component*/
import Users from './components/Users'
export default {
name: 'App',
data(){
return{
title:"users is the instantiated name of the global component"
}
},
components:{
Users,
}
}
</script>
<style>
</style>
or
<template>
<div >
<app-header></app-header>
<users></users>
<app-footer></app-footer>
</div>
</template>
<script>
import Users from './components/Users'
import Header from './components/Header'
import Footer from './components/Footer'
export default {
name: 'App',
data(){
return{
title:"users is the instantiated name of the global component"
}
},
components:{
'users':Users,
'app-header':Header,
'app-footer':Footer
}
}
</script>
<style>
</style>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.