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警告]：避免变异道具直接，因为只要父级组件重新渲染。而是使用基于数据或计算属性在道具的价值上。道具被突变：“抽屉”

谢谢。

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>

当导航抽屉和应用栏是不同的组件时，在Vuetify中绑定抽屉状态

1 个答案: