VueJS Material.io抽屉组件变量绑定
目前，我正在学习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
},现在是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
我希望它很清楚，我的问题是什么。
我希望，任何人都能帮助我。
这是我在这里的第一个问题-所以请友好点:)
/EDIT: 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"
回答 1
Stack Overflow用户
发布于 2018-06-01 14:42:22
我不是Vue专家--我自己还在学习--但我想我知道这里发生了什么。
我认为这个警告是因为你有一个同名的prop和data属性。尝试删除数据设置。您可以将道具设置更改为：
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>
希望这些信息也能帮助其他人！
https://stackoverflow.com/questions/50620205
复制相似问题