Vue.js props, components & data namespace

Question

When I have a Vue.js component it could look like:

import Icon from './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 does the namespace work in Vue? Is both props keys, data return object keys, and all components object keys will be added to the this instance? Is there not a risk for bugs/over-writing stuff?

So if I override this.data can I still read the original value I received in the props?

What is the community practise for setting "default" values in the data state object comming from props so we can both have a dynamic state object, and keep the props there in case we need it?

And related: if pass props with v-bind should I add them to watch internally on my component? or make all my dynamic values a computed version taking into consideration props everytime it is called?

Thanks for feedback.

Answer 1

Vue will warn you if you have a conflicting property name. For example, if you had this in your component:

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

You would get this warning:

[Vue warn]: The data property "foo" is already declared as a prop. Use prop default value instead.

And (as the warning alludes to), if you want to set a default value of a prop, you should do it in the definition of the prop like so:

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

---

In your example, you are passing a prop named data and using it to set the data properties of the Vue component. So the component will have access to this.label, this.icon, etc., and it will also have access to this.data.label, this.data.icon, etc.

This isn't overwriting anything because your prop named data is referencing a different object than your component's data properties. Bu, you probably don't ever want to name a property data, because you can see how it might get confusing.

---

It looks like you are, in general, trying to pass an object with property values to a component instead of having to set each one individually. You can do this with v-bind like so:

// assuming that 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 },
  // you can still set defaults for props not passed in the object
  baz: { type: Number, default: 0 }, 
}