手机版 欢迎访问it开发者社区(www.mfbz.cn)网站

当前位置: > 开发

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

时间:2021/5/29 11:54:22|来源:|点击: 次

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>


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

image-20210529113902414

2. 局部注册

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

  • 在test.vue的

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

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

Copyright © 2002-2019 某某自媒体运营 版权所有