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

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在侧边栏中，侧边栏理解它就像更改并启动一个循环，更新仪表板中的抽屉值，然后侧边栏捕获更改watch并开始新的循环。我也有这个警告，但这是另一个问题。

[Vue 警告]：避免直接改变 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：“抽屉”

谢谢。

标签： javascriptvue.jsvuetify.js

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>