v-navigation-来自子组件的抽屉控制状态

Question

我有一个v-navigation-drawer，可以通过单击子组件中的按钮打开。

所以我把v-model="drawer"改成了简单的value="drawer"，否则我会收到一个关于修改道具的警告，这是有意义的(感觉就像在做一些肮脏的角度双向数据绑定^^(。

这是代码：

layouts/default.vue:

<template>
<Header :toggleLeftMenu="toggleLeftMenu" />
<LeftMenu :show="showLeftMenu" :toggleLeftMenu="toggleLeftMenu" />
</template>
<script>
export default {
data() {
return {
showLeftMenu: true,
}
},
methods: {
toggleLeftMenu() {
this.showLeftMenu = !this.showLeftMenu;
},
}
}
</script>

components/layout/LeftMenu.vue:

<v-navigation-drawer
:value="show"
width="300"
clipped
fixed
app
>

这个问题是，可以通过点击背景(在小型设备上(来关闭抽屉。我需要将背景点击插入toggleLeftMenu道具，但根据文档，这似乎不可能。

如何实现对组件的完全控制？这个@backgroundClick事件丢失了吗？

我尝试使用@input，但它创建了一个无限循环，这也是有意义的。

感谢

使用vuetify 2.6.1。

Answer 1

我将v-model="drawer"更改为简单的value="drawer"，否则我会收到关于更改道具的警告

这不是一个正确的决定。当然，您不应该使用drawer作为模型，但您可以在LeftMenu组件中创建internalDrawer道具，并将v-model留在原处。

---

解决问题的一种可能方法是将事件从两个子组件发射到其父组件中。

因此，让我们以这种方式重写LeftMenu组件：

<template>
<v-navigation-drawer v-model="internalShow" width="200" clipped fixed app>
some drawer data
</v-navigation-drawer>
</template>
<script>
export default {
props: {
show: Boolean,
},
data() {
return {
internalShow: this.show,
};
},
watch: {
show (val) {
this.internalShow = val;
},
internalShow (val) {
if (val !== this.show) {
this.$emit("change-drawer-state");
}
},
},
};
</script>

在这种情况下，internalShow状态每次更改时，都会发出一个change-drawer-state事件。

您的Header组件可以用相同的方式重写：

<template>
<v-btn @click="$emit('change-drawer-state')">Drawer button</v-btn>
</template>

这是你的父组件的代码：

<template>
<div>
<Header @change-drawer-state="toggleLeftMenu" />
<LeftMenu :show="showLeftMenu" @change-drawer-state="toggleLeftMenu" />
</div>
</template>
<script>
import LeftMenu from "./LeftMenu";
import Header from "./Header";
export default {
components: {
LeftMenu,
Header,
},
data() {
return {
showLeftMenu: false,
};
},
methods: {
toggleLeftMenu() {
this.showLeftMenu = !this.showLeftMenu;
},
},
};
</script>

两个change-drawer-state事件处理程序都在调用相同的方法-toggleLeftMenu，然后该方法更改导航抽屉的show道具。

您可以在CodeSandbox游乐场中测试此解决方案。