子组件代码
<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>