Question

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

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

由于我不想在每个页面中反复复制和粘贴相同的抽屉组件代码，我只想创建一个侧边栏组件，然后我会在每个页面上导入。< / p>

到目前为止，非常好。

这很好。

但是现在 - 我希望能够打开和关闭侧边栏。就在此之前，当组件直接在页面中时，它很容易 - 只是一个带有布尔值的变量赋值，无论是显示还是隐藏侧边栏。但现在，我觉得很难将属性与组件同步。

让我向您展示当前的新代码，以澄清问题所在：

所以，这是页面组件：

<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

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

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

这是我在这里的第一个问题 - 所以请保持友善：）

/编辑： Opps，这是警告信息：

[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专业人士 - 我自己也在学习 - 但我想我能看到这里发生了什么。

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

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

看看是否能修复它。另外，考虑到你似乎在使用它，我建议考虑使用Vuex。文档很好，它可以真正帮助管理您的应用程序。可能甚至可以通过重新打开抽屉来解决这个问题。

编辑：

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

我目前的建议是将自定义事件添加到父组件的侧边栏组件标记：

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

然后将子组件中的close标记更改为：

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

希望这些信息能够帮助其他人！

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

1 个答案:

编辑：