VUE registered global components and sub-assembly

Global Components

Step one: Create a subfolder in the components folder Users.vue    

<template>
  <div class="users">
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'users',
  data () {
    return {
      msg: '用户名'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
 
</style>

 

Step 2: Perform in global registered in main.js

// at The Vue at The Build Version to the Load with `import` the Command
 // (Runtime-only or Standalone) has been in webpack.base.conf with the SET AN Alias. 
Import Vue from  ' VUE ' 
Import App from  ' ./App ' 
Router Import from  ' ./router ' 

// global component the first step is the name of the folder users 
Import users from './components/Users' 

Vue.config.productionTip = false 

// global registered users are components of the second part 
Vue .component ( 'Users', the Users) 


/ * eslint-NO-disable new new * / 
new new Vue ({ 
  EL: ' #app',
  router,
  components: { App },
  template: '<App/>'
})

The third step: a file referenced in the corresponding

<Template> 
  <div ID = " App " > 
    <-! <Router-View /> is a child node view -> 
    <-! <-View Router /> -> 
    <P> {{}} title < / P>    <Users> </ Users> 
  </ div> 
</ Template> 
<Script> 
Export default { 
  name: ' the App ' , 
  Data () { return { 
      title: " Users are examples of the name of the global component " 
    } 
  } 
} </ Script> 
<style> 
</ style>
 

    

Local assemblies    

In a new subassembly components Users.vue file folder , and then referenced in the file corresponding

<Template> 
  <div ID = " App " > 
    <-! <Router-View /> is a child node view -> 
    <-! <-View Router /> -> 
    <P> {{}} title < / P> <Users> </ Users> 
  </ div> 
</ Template> 
<Script> / * local registration component * / 
Import from the Users './components/Users' 
Export default { 
  name: ' the App ' , 
  Data () { return { 
      title: " Users are examples of the name of the global component " 
    } 
  }, components: { 
    the Users,
  }
}</script>
<style>
   


    
 



</style>