[JavaScript知识库]vue全局注册组件，局部注册组件

1.注册全局组件方式一

全局组件可以在任何地方使用，而且不需要进行在单独页面注册。
使用方法：
第一步：
在components文件夹下面建了两个vue组件页面。

第二步：
在plugin中建一个common.js文件，这个相当于是一个公用js专门用来存储导入的公用组件。
代码如下：

//把dialog和message组件都导入，install安装并注册组件
import dialog from '@/components/dialog.vue'
import message from '@/components/message.vue'
const loading = {
    install(Vue) {
    //注意组件命名：建议始终使用 kebab-case 的事件名如下例子：my-event
        Vue.component('dialog-com',dialog);
        Vue.component('my-message',message);
    }
}
export default loading

第三步：
在main.js文件中，把common.js导入，并use一下
代码如下：

import loading from './plugin/common.js'
Vue.use(loading)

2.注册全局组件方式二

1.创建了一个组件u.vue
2.直接在main.js中使用：

import myuser from './components/u.vue'
Vue.component('my-user',myuser);

3.在页面中调用该组件：

<my-user></my-user>

3.局部注册组件

1.现在创建了一个a.vue组件页面
2.在调用的页面如下使用：

<template>
  <div>
    <my-vue></my-vue>
  </div>
</template>
<script>
//导入组件
import myvue from "@/components/a.vue";
export default {
//注册组件
  components: {
  //my-vue是在页面中使用组件的名称，myvue是导入的名称
    "my-vue": myvue,
  },
  data() {
    return {};
  },
};
</script>