如何局部注册组件、全局注册组件、封装全局组件

核心思路： 导入 注册 使用

一、创建一个空的vue2项目，导入插件

导入UI插件

npm i element-ui

main.js新增内容

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

二、创建要演示的组件

src/components目录下新建 myRate.vue 文件

<template>
<div>
    <el-rate
      :value="value"
      disabled
      show-score
      text-color="#ff9900">
    </el-rate>
</div>
</template>
<script>
export default {
  name:"aAads",
  props:['value'],
}
</script>

src/App.vue的内容修改为↓

<template>
  <div>
    <!-- 使用 -->
    <my-rate v-model="num"></my-rate>
    <button @click="add(1)">+</button>
  </div>
</template>

<script>
/*
组件的使用无非三个步骤

导入
注册 
使用

*/

// 局部组件
// 导入
import myRate from "@/components/myRate.vue";
export default {
  name:'app',
  // 注册
  components: {
    myRate,
  },
  data() {
    return {
      num: 1,
      formData:{},
      
    };
  },
  methods: {
    add(count) {
      this.num = this.num + count;
    },
  },
};
</script>

<style>
.kuan{
  width: 400px;
}
</style>

此时运行项目， 能看到局部注册组件的效果。 点击 + 可以让星星加1

三、main.js中全局注册组件

1.添加以下代码

// 导入
import myRate from '@/components/myRate.vue'
// 注册
Vue.component('myRate',myRate)

2.将App.vue的局部 导入 注册 这两步注释

3.此时看效果 完全一样。 并且可以在项目中任何一个界面直接使用组件！

四、封装注册全局组件的插件

1.components下新建index.js文件， 通过install来批量注册组件

可以无限导入并注册组件

import myRate from '@/components/myRate.vue'

export default {
    install(v) {
      v.component('myRate', myRate)
    }
}

2.注释main.js中的全局注册

3.main.js添加代码

// 导入注册全局组件的插件，并挂载到Vue上
import myUi from '@/components'
Vue.use(myUi);