如何观察数组 props 值的变化？

Question

这是我的主要组件。 我有一个数组，我想将它发送到我的子组件以填充必要的字段。我用命名的 infos 属性发送它。

<template>
    <list-form :infos="infos"/>
</template>
<script>

export default {
   data(){

      return(){
         infos:[
                {name:'',surname:'',date:new Date().toISOString().substr(0, 10),menu:false},
                {name:'',surname:'',date:new Date().toISOString().substr(0, 10),menu:false},
                {name:'',surname:'',date:new Date().toISOString().substr(0, 10),menu:false},
                {name:'',surname:'',date:new Date().toISOString().substr(0, 10),menu:false}
               ]
      }  
   }
}
</script>

这是我的子组件 我在这里拿到了道具，并在 v-for 循环中使用了。

<template>
  <v-row v-for="(info,i) in infos" :key="'list-item-'+i">
    
    <v-col cols="6"><v-text-field v-model="info.name"/></v-col>

    <v-col cols="6" > <v-text-field v-model="info.surName"/></v-col>

    <v-col cols="6">
       <v-menu v-model="info.menu"
                            :close-on-content-click="false"
                            transition="scale-transition"
                            offset-y
                            max-width="290px"
                            min-width="auto">

                        <template v-slot:activator="{ on,  attrs }">
                            <v-text-field v-model="info.dateFormatted"
                                          label="date"
                                          placeholder="GG/AA/YYYY"
                                          v-bind="attrs"
                                          v-on="on"/>
                        </template>

                        <v-date-picker
                            v-model="info.date"
                            no-title
                            @input="info.menu = false"
                        />
        </v-menu> 
   </v-col>

  </v-row> 
</template>


export default {
props:{
   infos:{
          type:Array
         }
    }, 
    watch: {
       **//the problem is in here**
         date() {
             this.dateFormatted = this.formatDate(date)
        }, 
    },
    methods: {
        formatDate(date) {
            if (!date) return null
            const [year, month, day] = date.split('-')
            return `${month}/${day}/${year}`
        }
    } 
}
</script>

我想更改日期。如果日期改变了，我想改变它的格式。但我认为它有不同的方式来捕捉道具的变化。我尝试了一些方法来解决这种情况，但我找不到真正的方法。

通常我可以在 watch 中进行更改，但我无法通过这种方式进行更改

Answer 1

您无需查看子组件中的 prop 更改。只需使用 watch 观察父组件的变化（如果你真的需要的话）并在你的子组件中编写一些条件。

当您更改父组件中的数据时，Vue 会更新您的子组件，因此您无需在内部查看它。