javascript - Vue.js props, components & data namespace -

when have vue.js component like:

import icon './components/icon.vue' export default {     props: {         data: {type: object}     },     data() {         return {             label: this.data.label || '',             icon: this.data.icon || '',             placeholder: this.data.placeholder || '',             value: this.data.value || '',             disabled: this.data.disabled || false,             readonly: this.data.readonly || false,             options: this.data.options || []         }     },     components: {         icon: icon     } } 

how namespace work in vue? both props keys, data return object keys, , components object keys added this instance? there not risk bugs/over-writing stuff?

so if override this.data can still read original value received in props?

what community practise setting "default" values in data state object comming props can both have dynamic state object, , keep props there in case need it?

and related: if pass props v-bind should add them watch internally on component? or make dynamic values computed version taking consideration props everytime called?

thanks feedback.

vue warn if have conflicting property name. example, if had in component:

props: ['foo'], data() {   return {     foo: 'bar',   } }, 

you warning:

[vue warn]: data property "foo" declared prop. use prop default value instead.

and (as warning eludes to), if want set default value of prop, should in definition of prop so:

props: {     foo: { type: string, default: 'bar' } }, 

---

in example, passing prop named data , using set data properties of vue component. component have access this.label, this.icon, etc. , have access this.data.label, this.data.icon, etc.

this isn't overwriting because prop named data referencing different object component's data properties. but, don't ever want name property data, because can see how might confusing.

---

it looks are, in general, trying pass object property values component instead of having set each 1 individually. can v-bind so:

// assuming var settings = { foo: 1, bar: 2 } <child-component v-bind="settings"></child-component> 

child component:

props: {   foo: { type: number, default: 0 },   bar: { type: number, default: 0 },   // can still set defaults props not passed in object   baz: { type: number, default: 0 },  }