Vue全局自定义组件——多次复用不用重复注册

zhuanbike 2022-1-15 976

创建一个公共组件:

nav.vue 

一般在components文件夹里。

nav组件 中可以设置一个导航组件:

<template><el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>{{level1}}</el-breadcrumb-item>
  <el-breadcrumb-item>{{level2}}</el-breadcrumb-item></el-breadcrumb></template><script>
  export default {
    name: "Mynav",
    props:["level1","level2"]
  }</script><style scoped></style>

然后再main.js(入口文件)中定义全局组件

import MyBread from '@/components/common/nav.vue'
Vue.component("Mynav", Mynav);//全局自定义组件

最后在用到这个组件的地方引用即可

<Mynav level1="用户管理" level2="用户列表"></
Mynav>


最新回复 (0)
发新帖