Как в зависимости от наличия в родительском компоненте свойства, добавлять его дочернему в data()?

Question

[artloveyou]

Есть три компонента: родительский, дочерний и сторонний (дочерний дочернего).
Сторонний принимает объект настроек, дочерний несёт в себе основные настройки, которые не меняются плюс родительские. Иногда родительский может передать uniqOption: 3, а иногда uniqOption2: 4. Как принимать в дочернем по правильному такие свойства?
uniqOption: 3 и uniqOption2 есть в стороннем компоненте, но не всегда их надо передавать из родительского.

// parentComponent 1
<template>
  <childComponent :data="data" />
</template>
<script>
// дочерний компонент
export default {
  data() {
    return {
      data: {
        uniqOption: 3
      }
    }
  }
}
</script>

// parentComponent 2
<template>
  <childComponent :data="data" />
</template>
<script>
// дочерний компонент
export default {
  data() {
    return {
      data: {
        uniqOption: 3,
        uniqOption2: 4
      }
    }
  }
}
</script>

// childComponent
<template>
  <third-part-component :options="options" />
</template>
<script>
// дочерний компонент
export default {
  props: {
    data: Object,
  },
  data() {
    return {
      options: {
         foo: 1,
         bar: 2,

         // как сюда добавить при наличии в родительском компоненте свойство
         // uniqOption: 3 и uniqOption2: 4
         // но не так 
         // uniqOption: this.data.uniqOption
         // uniqOption2: this.data.uniqOption2
      }
    }
  }
}
</script>

Answer 1

[Aetae]

computed: {
  mergedOptions() {
    return {
      ...this.data,
      ...this.options
    }
  }
}

<third-part-component :options="mergedOptions" />
?

Comments

[artloveyou]

Спасибо за помощь