javascript - 当 nav-drawer 和 app-bar 是不同的组件时，在 Vuetify 中绑定(bind)抽屉状态

Question

现在我的仪表板中有两个组件:

仪表板

<template>
    <v-app>
        <Toolbar :drawer="app.drawer"></Toolbar>
        <Sidebar :drawer="app.drawer"></Sidebar>
    </v-app>
</template>

<script>
    import Sidebar from './components/layouts/Sidebar'
    import Toolbar from './components/layouts/Toolbar'
    import {eventBus} from "./main";
    import './main'

    export default {
        components: {
            Sidebar,
            Toolbar,
        },
        data() {
            return {
                app: {
                    drawer: null
                },
            }
        },
        created() {
            eventBus.$on('updateAppDrawer', () => {
                this.app.drawer =  !this.app.drawer;
            });
        },
    }
</script>

边栏

<template>
    <div>
        <v-navigation-drawer class="app--drawer" app fixed
                             v-model="drawer"
                             :clipped="$vuetify.breakpoint.lgAndUp">
        </v-navigation-drawer>
   </div>
</template>

<script>
    import {eventBus} from "../../main";

    export default {
        props: ['drawer'],

        watch: {
            drawer(newValue, oldValue) {
                eventBus.$emit('updateAppDrawer');
            }
        },
    }
</script>

工具栏

<template>
    <v-app-bar app>
        <v-app-bar-nav-icon v-if="$vuetify.breakpoint.mdAndDown"
                            @click="updateAppDrawer">
        </v-app-bar-nav-icon>
    </v-app-bar>
</template>

<script>
    import {eventBus} from "../../main";

    export default {
        props: ['drawer'],

        methods: {
            updateAppDrawer() {
                eventBus.$emit('updateAppDrawer');
            }
        }
    }
</script>

所以现在我有一个无限循环，因为当我按下应用栏中的图标时 - watch 在 Sidebar 中，Sidebar 理解它就像更改并开始循环，更新 Dashboard 中的抽屉值，然后 Sidebar 捕获 watch 中的变化并开始新的循环。 我也有这个警告，但这是另一个问题。

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "drawer"

谢谢。

Answer 1

我有类似的问题，可以通过此链接解决

https://www.oipapio.com/question-33116

仪表板

<template>
    <v-app>
        <Toolbar @toggle-drawer="$refs.drawer.drawer = !$refs.drawer.drawer"></Toolbar>
        <Sidebar ref="drawer"></Sidebar>
    </v-app> 
</template>

侧边栏

<template>
    <v-navigation-drawer class="app--drawer" app fixed v-model="drawer" clipped></v-navigation-drawer>
</template>
<script>
    export default {
        data: () => ({
            drawer: true
        })
    }
</script>

工具栏

<template>
    <v-app-bar app>
        <v-app-bar-nav-icon @click.stop="$emit('toggle-drawer')">
        </v-app-bar-nav-icon>
    </v-app-bar>
</template>