vue定义全局组件，不需要在文件中引入，直接使用

最新推荐文章于 2023-11-19 16:21:36 发布

在线笔记

最新推荐文章于 2023-11-19 16:21:36 发布

阅读量1.7k

点赞数 3

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/weixin_45856221/article/details/128240037

版权

1.首先写一个组件

<template>
    <div class="top-da">
        <div class="i-con">
            <i class="el-icon-collection-tag"></i>
        </div>
        <div class="title">
            <slot></slot>
        </div>
    </div>
</template>
<style scoped lang="scss">
.top-da{
    box-sizing: border-box;
    height: 48px;
    line-height: 48px;
    background: #f9f9f9;
    border-bottom: 1px solid #E4E7ED;
    margin: 0;
    padding: 0 8px;
    display: flex;
    align-items: center;
    .i-con{
        border-radius: 50%;
        height: 2rem;
        width: 2rem;
        background-color:#409EFF ;
        line-height: 2rem;
        color:#fff;
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        .el-icon-collection-tag:before{
            content:"\E765";
        }
    }
    .title{
        margin-left:1rem;
        font-size: 14px;
        color: #303133;
    }
    
}
</style>

2.在创建一个index.js文件

import topDa from '@/components/publicComponent/component/topDa.vue'
import nav from '@/components/publicComponent/component/nav.vue'
let components = {
    install:function(Vue){
        Vue.component("topDa",topDa)
    }
}
export default components;

3.在main.js中引入然后使用vue.use()注册或者使用

import components from '@/components/publicComponent/index.js'
Vue.use(components);

4.在组件中使用

<top-da>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>活动管理</el-breadcrumb-item>
          <el-breadcrumb-item>活动列表</el-breadcrumb-item>
          <el-breadcrumb-item>活动详情</el-breadcrumb-item>
        </el-breadcrumb>
      </top-da>