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
  }
}

以上便是元件註冊的兩種方式的簡單例項