vue中组件的注册方式

快来打我* 2022-12-17 07:22 180阅读 0赞

### 组件注册方式分为全局注册，局部注册； ###

全局注册：为了使注册更清晰，我将组件注册的部分单独放到一下文件中了，在utils文件夹下新建文件 components.js 文件，内容如下：

import Vue from 'vue';
    import myComponentOne from '../components/BasecompA.vue'; // 文件组件
    import myComponentTwo from '../components/BasecompB.vue'; // 文件组件
    
    Vue.component(myComponentOne.name, myComponentOne)
    Vue.component(myComponentTwo.name, myComponentTwo)

（文件组件中必须要定义name属性，然后组件注册时要使用组件的名字注册；）

components.js文件也要在main.js中引入一下，

// 导入全局组件
    import "./utils/components";

<-----两个组件代码例子：

<template>
      <div style="width:80px;height:60px;border:1px solid red;margin: 0 auto;">组件A</div>
    </template>
    <script>
    export default {
      name: "compa",
      data() {
        return {};
      },
      methods: {},
    };
    </script>
    <style lang="less" scoped>
    </style>

\---->

在其他文件模块中可以使用全局注册的组件了：

<compa></compa> 
     <compb></compb>

效果：![2020102411331981.png][]

### 局部注册： ###

在使用组件的文件中，引入组件，import compa from '@/components/a.vue'

然后在该文件中的属性引入：

components: \{

compa,

\},

然后在该文件中使用就ok了，<compa></compa>

[2020102411331981.png]: /images/20221123/4ace7e8dac0c4f42ac1c9726a5581752.png

发表评论取消回复

表情：

评论列表（有 0 条评论，180人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue局部注册组件实现组件化登录注册

Vue局部注册组件实现组件化登录注册一、效果二、代码 1、index.js 2、App.vue 3、首页

痛定思痛。/ 2024年04月06日 15:28/ 0 赞/ 93 阅读

相关 vue注册全局组件的方法

1、在components文件夹下新建package文件夹（文件夹可以随意命名），然后在package文件夹下创建index.js ![在这里插入图片描述][202001

谁借莪１个温暖的怀抱￠/ 2023年02月22日 13:55/ 0 赞/ 195 阅读

相关 Vue3---组件注册(全局组件、局部组件)

全局组件通过 app.component() 方式注册 ![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_

Love The Way You Lie/ 2023年01月20日 08:11/ 0 赞/ 862 阅读

相关 vue中组件的注册方式

组件注册方式分为全局注册，局部注册；全局注册：为了使注册更清晰，我将组件注册的部分单独放到一下文件中了，在utils文件夹下新建文件 components.js 文件，

快来打我*/ 2022年12月17日 07:22/ 0 赞/ 181 阅读

相关给容器中注册组件的几种方式（二）

接上篇：二：@Bean，导入第三方包里面的组件 //@Bean //不指定value时，默认将方法名称当成ID，当指定value时，name就是其value；类

悠悠/ 2022年12月07日 13:00/ 0 赞/ 303 阅读

相关给容器中注册组件的几种方式（一）

给容器中注册组件的方式： 1：包扫描+组件注解（@ ComponentScan等）：局限于自己写的类 2：@Bean：导入的第三方包里面的组件 3：@Imp

淩亂°似流年/ 2022年12月07日 12:51/ 0 赞/ 157 阅读

相关 vue注册组件跟注册局部组件

vue注册组件跟注册局部组件 > 由于以前都是用脚手架写的项目，因此常常忽略了这一点，由于最近入驻的公司是关于直播广告活动的，因此都是基于vue.js写出的项目，废话不多

红太狼/ 2022年11月09日 14:22/ 0 赞/ 198 阅读

相关 Vue注册全局组件-弹窗组件

在src目录下新建components文件夹 1.新建module文件夹，然后新建v-alert.vue <template> <transition

短命女/ 2022年05月14日 00:52/ 0 赞/ 265 阅读

相关 Vue.js--组件注册（全局注册、局部注册）、表行组件、组件中的data、组件数据的共享问题详解

组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，

我就是我/ 2021年08月13日 23:19/ 0 赞/ 461 阅读

相关 vue注册组件

<template> <view> <scroll-view :scroll-into-view="'ss'+current" scroll-x=

旧城等待，/ 2021年07月26日 00:04/ 0 赞/ 393 阅读