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>