Как во vue 3 массово передать пропсы в дочерний компонент?

Question

[Paul14]

Мне нужно передать множество пропсов из разные объектов родительского компонента в компонент ChildComponent , но я бы хотел сделать это в самой короткой записи. То есть не

<ChildComponent :prop1="globalOblect.prop1"  :prop3="globalOblect.prop3"  />

<ChildComponent v-bind="propsObj"  />

 export default{    
    components:{  Alien, DevTools, Test    },
    
    data(){
        return{
            globalOblect:{
                prop1: 1, // Передать это свойство и если оно изменилось сделать ререндер компонента ChildComponent 
                prop2: 2,
                prop3: 3, // Передать это свойство и если оно изменилось сделать ререндер компонента ChildComponent            
                ...
              }, 
            globalOblect2:{
            ...
            prop4: 4, // Передать это свойство и если оно изменилось сделать ререндер компонента ChildComponent 
           ...
},


created(){    
   this.propsObj = [this.globalOblect.prop1,this.globalOblect.prop3,this.globalOblect2.prop4,...]
},
...

Пропсы удается передать раз, но компонент ChildComponent не обновляется. Я пробовал разные подходы, но застрял. Помогите, я новичок.

Answer 1

[modelair]

для этого есть реактивность.

<template>
  <child-component v-bind="globalObject"/>
</template>

<script setup>
// import { Alien, DevTools, Test, ChildComponent } from 'where?'
import { reactive } from 'vue'

const globalObject = reactive({prop1, prop2, prop3})
</script>

а вообще читайте документацию. https://vuejs.org/guide/components/props.html - для новичков там исчерпывающе