封装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>