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

前往低代码交流专区

更多推荐