VUE组件的全局注册与局部注册

VUE组件的全局注册与局部注册

在使用vue构建前端项目的时候，经常利用vue组件复用的特性，而组件用在项目中有两种注册方式，分别是全局注册和局部注册
编辑之后呢

1. 全局注册

• 全局注册指的是将组件直接注册给vue实例，所以在任何其他的页面中均可以通过拓展html的方式用到该组件，标签名即为组件的名字

• 实例：

任意位置编写组件User.vue

<template>
  <div class="Users">
    <li v-for="user in users">
      {
   
   {user}}
    </li>
  </div>
</template>

<script>
export default {
      
      
  name: "Users",
  data(){
      
      
    return{
      
      
      users:['1','2','3']
    }
  }
}
</script>

<style scoped>

</style>

main.js中全局注册组件

import Users from "./components/Users";  //导入组件
Vue.component('users',Users)      //注册组件

编写一个test.vue

<template>

  <div class="block">
    <users></users>
  </div>
</template>
<script>
export default {
      
      
}
</script>
<style lang="scss" scoped>

</style>

配置好路由之后即可在网页中正确显示

2. 局部注册

• User.vue文件不变，main.js中的相关代码可以删去，

• 在test.vue的

import user from '../components/Users'
export default {
    
    
  components: {
    
    
    'Users':user
  }
}

以上便是组件注册的两种方式的简单实例