VueJS Material.io Drawer 组件变量绑定

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。文档很好，它确实可以帮助管理您的应用程序。甚至可以通过重新打开抽屉来解决这个问题。

编辑：

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

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

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

然后将子组件中的关闭标签改成这样：

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

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