Vue js，控制子组件从父组件渲染还是将父组件数据的数据同步到子组件数据？

Question

我目前正在使用Vuejs创建曼陀罗图，基本上中心表的数据应该与其他表的中心数据同步，如下所示：enter image description here

目前使用一个父组件来渲染9个表中的每一个，然后每个表调用一个网格，通用组件称为Item来查看数据。

父组件

<template>
    <div>
        <h1>Mandal-art</h1>
        <div class="container">
            <div v-for="(eachArr,index) in this.getMandalObject" :key="'arr'+index">
            <!-- <div v-for="(eachArr,index) in Mandals" :key="'arr'+index"> -->
                <!-- {{this.data.mandalObject[parseInt(key)]}}dd -->
                <single-mandal
                    v-on:onChange="mandalChange"
                    :propsArray="eachArr"
                    :propsIndex="index"
                    :key="index"

                ></single-mandal>
            </div>
            <button @click="onClick('pdf')">pdf</button>
            <button @click="onClick('svg')">svg</button>

        </div>

    </div>
  
</template>

<script>
import SingleMandal from '@/components/SingleMandal';
import {mapGetters} from 'vuex';
// import {store} from '../store/index';
export default {
    name: 'MandalArt',
    data(){
        return{
            mandalObject:{
                0: [false,['first post','','','','','','','','']],
               1:[false,['second post','','','','','','','','']],
               2:[false,['third post','','','','','','','','']],
               3:[false,['fourth post','','','','','','','','']],
               4:[true,['fifth post','','','','','','','','']],
               5:[false,['6th post','','','','','','','','']],
               6:[false,['7th post','','','','','','','','']],
               7:[false,['8th post','','','','','','','','']],
               8:[false,['9th post','','','','','','','','']]
            }
        }
    },
    methods:{
        updateData: async function(index){
            console.log('before nex tick data', this.mandalObject[index][1])
            await this.$nextTick();
            console.log('after next tick data', this.mandalObject[index][1])
        },
        onClick: function(typeClick){
            if(typeClick==='pdf'){
                console.log('pdf clicked')
            }else if(typeClick==='svg'){
                console.log('svg clicked')
            }else{
                console.log('excel clickeddd')
            }
        },
        mandalChange(index, secondIndex,value){
            //this functino should connect center to medium mandal Object
            if (secondIndex===4){
                console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!')
                // this.mandalObject[index][secondIndex] = value;
                this.mandalObject[4][1][index] = value;
                //updating the center Mandal
                // this.$set(this.mandalObject[4][1], index, value)
                this.updateData(4)
            }else if(index==="4"){
                console.log('!!!!!!!!!!!!!!!!!!!!!!!!!!@@@')
                //here enable the other mandals
                this.mandalObject[secondIndex][0] = true;
                //when changing to true, should be enabled
                this.mandalObject[secondIndex][1][4] = value;
                //updating the other mandals
                // this.$set(this.mandalObject[secondIndex][1], 4, value)
                this.updateData(secondIndex)

            }
            

            // this.$forceUpdate();
        }
    },
    components:{
        SingleMandal
    },

单表组件

<template>
  <div>
      <div class="grid-container">
          <Item 
            v-on:onChange="onChild" 
            v-for="(item,index) in this.SingleMandal" 
            :key="item+index" 
            :props-boolean="Abled"
            :props-data="[index, item]"
          ></Item>
      </div>
  </div>
</template>

<script>
//need to import two components for list and listitem
import Item from '../components/common/Item';

export default {
    name:"SingleMandal",
    props: ['propsArray', 'propsIndex'],
    components:{
        Item
    },
    data(){
        return {
            SingleMandal: this.propsArray[1],
            Abled: this.propsArray[0]
        }
    },

项目组件

<template>
  <div class="item">
      <input 
        class="item-input" 
        type="text"
        v-model="inputData" 
        @input="onChangeChild" 
        :disabled="!activated"
      />
  </div>
</template>

<script>
export default {
    props: ['propsData', 'propsBoolean'],
    data() {
        return{
            inputData: this.propsData[1],
            index: this.propsData[0],
            activated: this.propsBoolean
        }
    },

    methods:{
        onChangeChild(event){
            event.preventDefault()
            this.$emit('onChange', this.index,this.inputData)
        }
    },

问题 enter image description here

如上图，不会自动更新。

** 我做过的事情 ** 所以我认为更改子组件的键会自动激活对它们的重新渲染。但是，当我这样做时，输入在一个字符后失去焦点（显然是由于重新渲染）因此，我想控制何时重新渲染或重新渲染后不失去输入的焦点。

有什么解决办法吗？

Answer 1

使用 blur 事件，当调用 input 的 blur 事件时，更新子元素的 key。

<input @blur="handleBlur">

...

new Vue({
  el: '#app',
  methods: {
    handleBlur(e) {
      console.log('blur')
    }
  }
})