我正在 VUE 上构建通用表组件，并通过@override
dispose() {
animationController.dispose(); // you need this
super.dispose();
}
传递参考源。
示例：
props此后，在<drk-table table="users"></drk-table>
事件中，我使用Axios从服务器加载数据。
当我的模板中仅只有一个组件时，此方法很好用。
但是，如果我尝试在条件 v-if 中用不同的道具重用组件，则仅在第一个表上加载其负载：
mounted()但是，如果我对 v-show 做同样的事情，那是可行的：
<div v-if="currentPage == 0">
<drk-table table="users"></drk-table>
</div>
<div v-else-if="currentPage == 1">
<drk-table table="admins"></drk-table>
</div>
*(currentPage is a data field)*
<div v-show="currentPage == 0">
<drk-table table="users"></drk-table>
</div>
<div v-show="currentPage == 1">
<drk-table table="admins"></drk-table>
</div>
<template>
<div>
<v-app-bar app clipped-left color="amber">
</v-app-bar>
<v-navigation-drawer v-model="drawer" app clipped color="grey lighten-4">
</v-navigation-drawer>
<v-content>
<v-container fluid fill-height>
<v-layout align-center justify-center>
<v-flex text-xs-center>
<div v-if="currentPage == 0">
<drk-table table="users"></drk-table>
</div>
<div v-else-if="currentPage == 1">
<drk-table table="admins"></drk-table>
</div>
</v-flex>
</v-layout>
</v-container>
</v-content>
<v-footer color="indigo" app>
</v-footer>
</div>
</template>
<script>
export default {
data: () => ({
drawer: false,
itens: [
{ icon: 'contacts', text: 'item0' },
{ icon: 'settings', text: 'item1' },
],
currentPage : 0,
}),
methods:{
goPage(item){
console.log("goint to "+item);
this.currentPage = item;
}
}
};
</script>
的官方文档说，VUE每当条件变为TRUE时都会重新创建该项目。
我对此有疑问，为什么当我将同一组件与不同的道具一起使用时，v-if不能正常工作吗？
在这种情况下，我需要更改我的v-if事件吗？