VUE 注册全局组件

Vue注册全局组件的步骤
(1) 写组件
(2)定义组件的名称 和数据
(3)在main.js中引入
(4)Vue.component("my-bread", MyBread);注册

1==》新建文件夹(cuscom)    文件(myBread.vue)
在myBread.vue文件如下
{
    <template>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>
            <a href="/">{{value1}}</a>
            </el-breadcrumb-item>
            <el-breadcrumb-item>{{value2}}</el-breadcrumb-item>
        </el-breadcrumb>
    </template>

    <script>
        // 自定义组件  面包屑
        export default {
        name: "my-bread", //给组件起一个名字
        data() {
            return {};
        },
        // props外界来的数据
        // props值是字符串数组
        // props中的数据的值，来源于使用组件时 传递的值
         props: ["value1", "value2"]
    };
    </script>
}

 

2==>在main.js中导入组件  在main.js 组件 注册
import MyBread from "@/components/cuscom/myBread.vue";
Vue.component("my-bread", MyBread); //注册组件

 

3==》在某个文件中使用
<my-bread value1="权限管理" value2="权限列表"></my-bread>

 

可以将上面的方式优化一下

--------------------------------------------------------------------------------

组件的名字应该是写组件的人提供的
将上面的优化一下
1==》其他不变
{
  <script>
    // 自定义组件  面包屑
    export default {
        name: "my-bread", //给组件起一个名字 new add
        data() {
            return {};
        },
        // props外界来的数据
        // props值是字符串数组
        // props中的数据的值，来源于使用组件时 传递的值
     props: ["value1", "value2"]
    };
    </script>
}

2==>
// MyBread是一个对象
import MyBread from "@/components/cuscom/myBread.vue";
Vue.component(MyBread.name, MyBread); //注册组件

3==>
  <my-bread value1="权限管理" value2="权限列表"></my-bread>