vue之全局自定义组件

在项目开发中，往往需要使用到一些公共组件，比如，弹出消息、面包屑或者其它的组件，为了使用方便，将其以插件的形式融入到vue中，以面包屑插件为例：

1、创建公共组件MyBread.vue

<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: "MyBread",
    props:["level1","level2"]
  }
</script>

<style scoped>

</style>

2、在main.js中全局注册到vue中

import MyBread from '@/components/common/MyBread.vue'


Vue.component("MyBread", MyBread);//全局自定义组件

3、使用

在需要的组件中可以直接使用，注意需要父子传值

    <!--面包屑-->
    <MyBread level1="用户管理" level2="用户列表"></MyBread>