封装ElementUI面包屑组件

子组件代码

<template>
<!--面包屑-->
<div>
<el-breadcrumb separator-class="el-icon-arrow-right" >
<el-breadcrumb-item
v-for="(item, index) in breadList"
:key="index"
:to="{ path: '/' + item.path }"
>
{{ item.title }}
</el-breadcrumb-item>
</el-breadcrumb>
</div>
</template>
<script>
export default {
name: "content",
props: ['breadList'],
data () {
return {
}
},
created () {
},
methods: {
},
watch: {
}
}
</script>

父组件代码

<div class="news-left-container">
<!--面包屑组件-->
<newsBreadcrumb
:breadList="dataPath"></newsBreadcrumb>
</div>
<script>
import newsBreadcrumb from "@/components/breadcrumb.vue";
export default {
name: "news",
data(){
return{
// 面包屑组件传值
dataPath: [
{ title: "首页", path: "home", id: 1 },
{ title: "新闻资讯", path: "news", id: 2 }
]
}
},
components: {newsBreadcrumb}
}
</script>

最后

以上就是笨笨发卡为你收集整理的封装ElementUI面包屑组件的全部内容，希望文章能够帮你解决封装ElementUI面包屑组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。