Vue.js props, components and data namespace

Question

When I have a Vue.js component, it might look like this:

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? Will the property keys, keys of return objects, and keys of objects of all components be added to the instance this? Is there a risk for errors / rewriting?

So, if I override this.data, can I read the original value I got in props?

What is the community’s practice for setting default values ​​in a state object data, starting with props, so we can have a dynamic object stateand save propsthere, if necessary

: pass props v-bind watch ? , props , ?

.

Answer 1

Vue , . , :

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

:

[Vue warn]: "foo" . prop.

( , ), , :

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

---

data Vue. , this.label, this.icon .. this.data.label, this.data.icon ..

-, data , . , , data, , .

---

, , , , . v-bind :

// assuming that var settings = { foo: 1, bar: 2 }
<child-component v-bind="settings"></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 }, 
}