Vue2 - How to add my own properties to the component-CodePudding

I am totally new in JS and VueJS and I am giving my first steps with vue.

I want to add in each view an specific property called breadcrumbs:

export default {
  name: 'ordersList',
  breadcrumbs: [],
.....

I want to get that array later from a my main component (the entry component of the whole app) to create the breadcrumbs of that view.

Any idea?

CodePudding user response：

If you want to pass a prop to your component use

export default {
  props: {
    breadcrumbs: {
      type: array,
      required: true
    }
  }
}

From parent component just pass <component :breadcrumbs="yourBreadcrumbs"/>

CodePudding user response：

if use vue3 u need create setup() which have return { breadcrumbs: ref([])}

for vue 2 u need use data: () {}

CodePudding user response：

If you're using Vue 2 you can add that in like

export default {
  name: 'ordersList',
  data () {
   return {
     breadcrumbs: [],
   }
  }
.....

Please have a look at the docs here