全局组件和局部组件

1.全局组件和局部组件的区别

全局组件：只需要在main.js中导入一次，整个项目都可以直接使用（在main.js中导入）

局部组件：用一次 导一次 （在用到的地方导入）

2.局部组件导入步骤

// 3部曲
//[1]导入子组件
import Register from './Register.vue'
​
export default {
  
  //[2]注册子组件components: { Register },
  compontents: {
    Register
  },
  
 #[3]在html中当作标签使用

3.全局组件导入步骤

//[1]导入全局组件
import Register from './Register.vue'
​
//[2]注册全局组件
//Vue.component('组件名'，导入的组件);
// 注：若是组件名不想写死，可以使用 组件.name; Vue.component(Register.name,Register);
Vue.component('register'，Register);
​
//[3]使用的时候就可以将定义的组件名 当作标签使用了!!!

​
//方法2--也可以适用Vue.use注册全局组件
//1.在utils中创建comm.js
//2.导入全局组件
//3.注册全局组件
//4.在main.js中导入comm.js
//5.Vue.use(导入的js名)

4.使用

# 在使用插槽的时候，子组件使用必须使用****双标签****
//标签名小写；（在使用时将组件名当作标签使用---注：若是组件首字母大写，我们在使用时可以改为小写；但是中间若有大写字母，使用时不能改为小写）
<register></register>

总结

一般使用多次，像路由，axios,elementUl几乎在每个文件都是用，就使用全局导入；

若是使用一两次，即像token，在登录时获取，在退出时删除，则使用局部导入；

举例说明

像这个在项目的大多数组件中都使用到了，因此可以封装为一个全局组件

在这里，使用到vant的nav-bar组件进行封装

注：此处用到了组件的 父子组件进行传值

<template>
  <van-nav-bar
    left-arrow
    @click-left="$router.push(url)"
    class="selfnavbar"
  >
    <template #title>
      <div class="title">{{ title }}</div>
    </template>
    <template #left>
      <div class="left iconfont" v-html="left"></div>
    </template>
    <template #right>
      <span>{{ right }}</span>
    </template>
  </van-nav-bar>
</template>

封装完毕之后，在main.js引入，注册全局组件之后在项目中的任何一个组件都可以使用了

// 导入全局组件
import selfNavBar from '@/component/selfnavbar.vue'
// 注册全局组件
Vue.component('selfnavbar', selfNavBar)

使用

 <selfnavbar left="&#xe637;" :url="'/find'"></selfnavbar>