スプレッド（...）表記を使用してオブジェクトを反応させる方法

Question

私は、オブジェクトの不透明度の属性を変更し、その変更を無効にするためにしようとしている：

Component.vue：

<child-component :common="itemCommon"></child-component> 

<script> 
data() { 
    return { 
    rest: {} 
    } 
}, 

computed: { 
    itemCommon() { 
    return { 
     item: { 
     opacity: 1, 
     ...this.rest 
     } 
    } 
    } 
}, 

beforeMount() { 
    this.rest = { name: 'a' } 
} 
<script> 

childComponent.vue：

<script> 
props: { 
    common: { 
    type: Object, 
    default() { 
     return {} 
    } 
    } 
}, 

beforeMount() { 
    this.common.item.opacity = 0 
} 
</script> 

opacity属性は0に設定されません。 Vueは考慮しないitemCommon

itemCommonが反応するようにコードを変更するにはどうすればよいですか？

Answer 1

一般的に、vueはコンポーネントのdataプロパティの変更を監視し、dataの変更があるとビューを変更します。したがって、データをとするには、コンポーネントのdataで宣言する必要があります。ここにはいずれのコンポーネントにもopacityがありません。したがって、おそらくvueによって選択されません。それを親のdataに追加すると修正されるはずですが、directly setting prop in childのような警告が表示されたら、this.common.item.opacity = 0を親に移動する必要があります。あなたは警告が、ここで簡単に検索をたくさん見つけることができます：propは一般的に子供でも、それを変更すると混乱して、親に変更され、設計によって、子どもが機能/インターフェイスを提供し、子供を利用した親を、実行時に子にデータを与え、期待した機能でデータを処理する子を信頼するので、ルーズカップルを実現します。 （これは通常、一方通行のデータフローとも呼ばれます）