Vue.js小道具、コンポーネント＆データの名前空間

Question

私はそれはのようになります。Vue.jsコンポーネントを持っている場合：

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 
    } 
} 

どのようにしてVueの中に名前空間の仕事？両方の小道具キー、データ戻りオブジェクトキー、およびすべてのコンポーネントオブジェクトキーがthisインスタンスに追加されますか？バグや上書きの危険はありませんか？

this.dataを無効にすると、私はpropsで受け取った元の値を読み取ることができますか？

我々は両方がダイナミックstateオブジェクトを持つことができるので、propsから来data状態オブジェクトに「デフォルト」の値を設定するためのコミュニティの練習があり、我々はそれを必要とする場合にはそこpropsを保ちますか？

関連性：propsをv-bindとすれば、私はそれらをコンポーネントの内部でwatchに追加する必要がありますか？または、すべての動的値を、呼び出されるたびにpropsを考慮した計算バージョンにしますか？

フィードバックありがとうございます。

Answer 1

矛盾するプロパティ名がある場合は、警告メッセージが表示されます。たとえば、場合、あなたのコンポーネントでこれを持っていた：

は[ヴューが警告]：あなたはこの警告になるだろう

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

データプロパティ「foo」が既に小道具として宣言されています。代わりにデフォルトの値を使用してください。あなたが小道具のデフォルト値を設定したい場合は、あなたがそのような小道具の定義にそれを行う必要があります

そして、（警告がに見逃さとして）、：

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

---

あなたの例では、dataという名前の小道具を渡し、それを使ってVueコンポーネントのデータプロパティを設定します。 dataという名前の小道具は、あなたのコンポーネントのデータとは別のオブジェクトを参照しているので、これは何も上書きされていない

など、だから、部品等this.labelへのアクセス、this.iconを、持っているし、それはまたthis.data.labelにアクセスする必要があります、this.data.iconプロパティ。しかし、混乱する可能性があるので、おそらくプロパティーの名前をdataにしたいとは思わないでしょう。

---

通常、プロパティ値を持つオブジェクトを個々に設定するのではなく、コンポーネントに渡そうとしているようです。 V-バインドとパスの小道具は、私は私のコンポーネントに内部的に見るためにそれらを追加する必要がある場合：

// 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 }, 
}