我在Codesandbox中做了一个示例
有没有办法通过点击按钮“Col-2”来折叠侧边栏。按钮“Col-1”工作正常，但有必要通过点击“Col-2”来工作。
我试过调用collapsedButton，但没有成功。
<script>
export default {
name: 'template',
methods: {
setCollapsed () {
this.collapsed = !this.collapsed
},
collapseButton () {
this.$emit('setCollapsed')
this.collapsed = !this.collapsed
}
}
}
</script>有人能帮我一下吗？
2条答案
按热度按时间myzjeezk1#
你应该让
collapsed成为一个 prop ，并从父组件控制它。你需要监听父组件中的事件（this.$emit('setCollapsed')），并相应地更新collapsed。希望这能帮上忙，祝你好运！
ewm0tg9j2#
由于您使用的是Vue 2，因此可以使用mixin。
工作演示：https://codesandbox.io/s/vue-forked-tz1yox?file=/src/components/sidebar.vue
更详细地说，mixin使用了一个reactive对象，该对象作为侧边栏折叠状态的一个真实源，同时公开了一个可写的computed（
collapsed）和一个toggleSidebar方法。在任何组件中使用mixin都等效于将可写计算和方法写入组件。
使用React对象而不是每个组件的
data作为状态，可以使所有组件的mixin共享状态。