在component文件夹中,
新建文件夹(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>
全局组件直接在谋而页面使用就可以了。
不需要在使用的页面上注册哈
因为它在main.js中注册在vue上面去了。随意可以直接使用。
其实还可以将上面的组件 进行优化一下的
其他不变,在mian.js中注册时,这样写更好一些的
组件的名字应该是写组件的人提供的
// MyBread是一个对象
import MyBread from "@/components/cuscom/myBread.vue";
Vue.component(MyBread.name, MyBread); //注册组件
使用时还是不变
<my-bread value1="权限管理" value2="权限列表"></my-bread>