javascript - [Vue 警告]:避免直接改变 prop
问题描述
如何解决此错误消息:
[Vue 警告]:避免直接改变 prop,因为每当父组件重新渲染时,该值都会被覆盖。相反,使用基于道具值的数据或计算属性。正在变异的道具:“抽屉”
父组件:
<template>
<div>
<q-header bordered class="bg-grey-11">
<q-toolbar>
<q-btn
@click="drawer = !drawer"
/>
.....
</q-header>
<drawer-main :drawer="drawer"></drawer-main>
</div>
</template>
<script>
import DrawerMain from "@/components/drawer/DrawerMain";
export default {
props: ["miniState", "drawerClick"],
components: {
DrawerMain
},
data() {
return {
drawer: false
};
}
};
</script>
子组件:
<template>
<q-drawer
v-model="drawer"
show-if-above
:mini="!drawer || miniState"
@click.capture="drawerClick"
>
<div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
<q-btn
@click="miniState = true"
/>
</div>
</q-drawer>
</template>
<script>
import DrawerNavigation from "@/components/drawer/DrawerNavigation";
export default {
props: ["drawer"],
components: {
DrawerNavigation
},
data() {
return { miniState: false };
},
methods: {
drawerClick(e) {
if (this.miniState) {
this.miniState = false;
e.stopPropagation();
}
}
}
};
</script>
解决方案
使用@Terryv-bin.sync
的评论中提到的或将道具值分配给数据属性。
<template>
<q-drawer
v-model="internalDrawer"
show-if-above
:mini="!internalDrawer|| miniState"
@click.capture="drawerClick"
>
<div class="q-mini-drawer-hide absolute" style="top: 15px; right: -17px">
<q-btn
@click="miniState = true"
/>
</div>
</q-drawer>
</template>
<script>
import DrawerNavigation from "@/components/drawer/DrawerNavigation";
export default {
props: ["drawer"],
components: {
DrawerNavigation
},
data() {
return {
miniState: false
internalDrawer: this.drawer
};
},
methods: {
drawerClick(e) {
if (this.miniState) {
this.miniState = false;
e.stopPropagation();
}
}
}
};
</script>
推荐阅读
- node.js - 只能创建一个 cardNumber 类型的元素
- c# - 如何找出 EF 更新中错误的确切原因?
- python - Python BeautifulSoup 找不到标签
- flutter - 忽略进一步输入的颤振延迟
- mongodb - MongoDB - 在应用程序启动期间定期更新集合
- javascript - 如何使用谷歌表格应用宏文件夹范围?
- swift - 如何翻译/本地化 PrivacyPolicy.strings
- c# - 为什么我的 Azure Cosmos 查询应该返回许多结果却返回空结果?
- android - Android strings.xml 撇号、日期和字符串崩溃
- intellij-idea - Intellij Markdown 插件预览底部?