组件被重新渲染，但提交的道具在重新渲染后变为空白

Question

我面临以下困难：

我在另一个组件中调用一个组件（ListView），传递一些属性。

第一次渲染组件时，它通过 Created 钩子，在这里我得到一些信息以传递给 ListView 的 props。

我第二次渲染它，它没有调用created，所以数据到ListView是空的。

我需要它以这种方式工作，因为我正在构建我的动态菜单，所以当我更改菜单时，它必须通过组件并更改其属性。

我该如何继续？

尝试： 1 - 使用 :key 2 - 强制更新

都失败了

（对不起，我的英语不好）

Devices.vue

  <div >
    <ListView :key='$route.name'
        :domainName="domainName" 
        :metadataName="metadataName"
        :entityList="entityList"
        :metadataList="metadataList"
        :showBooleanAsFlag="true"
        :showButtonAddEntity="true"
        
      />

  </div>
</template>

<script>
import restService from "../../services/restService"
import ListView from "../../components/ListView/ListView.vue";
import {getCapitalizeFirstLetter} from '@core/utils/utils'


export default {
  components: {
    ListView,
  },
  data() {
    return {
      metadataName: '',
      domainName: '',
      metadataList: [],
      allMetadata: [],
      entityList: [],
    };
  },
   methods: {
     print(data){
       console.log('PRINT ', data)
       
     },
     async loadSettings(){
       
        var arrayOfRoute = this.$route.name.split('-');
    
        this.domainName = getCapitalizeFirstLetter(arrayOfRoute[1])
        this.metadataName = getCapitalizeFirstLetter(arrayOfRoute[2])
        
        await restService.getMetadata(this.domainName, this.metadataName ).then((response) => {
          this.metadataList = response.data.result.metadata;
        });

        await restService.getEntity(this.domainName, this.metadataName).then((response) => {
          this.entityList = response.data.result.entity;
        });
     }
  },
  
  watch:{
    async '$route' (to, from){
      console.log('WATCH!!!')
      this.loadSettings();
    }
  },
  created(){
    console.log('CREATED!!!')
    this.loadSettings();
  }

};
</script>

<style lang="scss">
</style>

Answer 1

试试beforeUpdate 钩子。

beforeUpdate(){
    console.log('BeforeUpdate!!!')
    this.loadSettings();
  }

https://vuejs.org/api/options-lifecycle.html#beforeupdate