VueJS Material.io 抽屉组件变量绑定

Question

目前我正在学习 VueJS 并且正在使用 http://vuematerial.io。

我构建了一个包含多个页面的应用程序 - 每个页面都包含一个侧边栏（抽屉组件 https://vuematerial.io/components/drawer）。

由于我不想在每个页面中一遍又一遍地复制和粘贴相同的抽屉组件代码，所以我只想创建一个侧边栏组件，然后将其导入到每个页面中。

到目前为止，还不错。

这工作正常。

但现在 - 我希望能够打开和关闭边栏。就在之前，当组件直接在页面中时，这很容易——只需一个带有布尔值的变量赋值来决定是否显示或隐藏侧边栏。但是现在，对我来说似乎很难在组件上同步属性。

让我向您展示当前的新代码以阐明问题所在：

所以，这是页面组件：

<md-toolbar class="md-primary">
    <md-button class="md-icon-button" @click="showSidebar=true">
        <md-icon>menu</md-icon>
    </md-button><span class="md-title">Dashboard</span>
</md-toolbar>
<Sidebar v-bind:showSidebar="showSidebar"></Sidebar>

这就是 Vue 结构 - 你可以看到 - 我想绑定 showSidebar 属性。这就是我在页面中实现它的方式

import Sidebar from './sidebar.vue';
export default {
    data: function () {
        return {
            showSidebar: false
        }
    },
    components: {
        Sidebar: Sidebar
    },

现在侧边栏组件本身：

<md-drawer v-bind:md-active.sync="showSidebar">

侧边栏组件然后通过属性获取值，如下所示：

export default {
    name: 'sidebar',
    props: ['showSidebar'],

这似乎有效！我可以单击页面上的菜单按钮，将属性设置为 true - 侧边栏就会显示出来！伟大的！但是.. 当我点击这个侧边栏之外的地方时，会出现这个警告消息 - 而且 - 而且 - 我无法在新的点击上再次重新打开它。它关闭了，但我无法再次打开它，直到我完全重新加载页面。

我怎样才能解决这个问题？我也考虑过使用事件，因为抽屉组件似乎在监听事件，但我没有成功。这是抽屉组件的当前代码：https://github.com/vuematerial/vue-material/blob/dev/src/components/MdDrawer/MdDrawer.vue

我希望大家清楚，我的问题是什么。

我希望，任何人都可以帮助我。

这是我的第一个问题 - 所以请多多关照:)

/编辑：糟糕，这是警告信息：

[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: "showSidebar"

Answer 1

我不是 Vue 专业人士 - 仍在学习 - 但我想我可以看到这里发生了什么。

我认为这个警告特别是因为你有一个道具和一个同名的数据属性。尝试删除数据设置。您可以将道具设置更改为：

props: {
    showSidebar: {
        type: Boolean,
        default: false
    }
}

看看是否可以解决问题。另外，鉴于您似乎是如何使用它的，我建议您考虑使用 Vuex。该文档很好，它确实可以帮助管理您的应用程序。甚至可能通过重新打开抽屉来解决这个问题。

编辑：

在更仔细地审查了该用户的代码后（在不和谐的情况下与他们联系），我确定问题是虽然打开侧边栏的过程是由 [=36= 上的属性管理的] 组件，关闭它的行为严格发生在 child 中。当您将数据从 parent 绑定到 child 时，您需要确保更新相关更改的源（parent 组件）。在 Vue 中，这些更改只会被推向一个方向。要将信息传递给 parent，您必须 $.emit 事件。

我目前的建议是在 parent 组件的侧边栏组件标签中添加自定义事件：

<Sidebar v-bind:showSidebar="showSidebar" v-on:hide-sidebar="showSidebar=false"></Sidebar>

然后将 child 组件中的关闭标记更改为：

<span class="md-title" @click="$emit('hide-sidebar')">FleaMaster</span>

希望这些信息对其他人也有帮助！

VueJS Material.io 抽屉组件变量绑定

VueJS Material.io Drawer component variable binding

javascript

components

drawer

vue.js

material-design

编辑：