javascript - 使用 VueJS 更改组件边距

Question

我有一个非常基本的 VueJS 侧边栏组件。我也在使用TailwindCSS。

我有一个带有按钮的导航组件。单击该按钮会发出一个名为“toggle”的事件，触发我侧边栏上的“toggle”方法。

我的侧边栏在移动设备上关闭，并使用 TailwindCSS 响应式实用程序在桌面上打开。

在我的侧边栏组件中，我希望能够根据其当前状态打开/关闭（设置边距/flex-grow/shrink）侧边栏。我可以使用 VueJS 和绑定类来设置这些属性，但它永远不会同时工作，因为一个默认打开而另一个关闭 - 我怎么知道设置边距或删除它？

下面是我非常基本的组件。请原谅我无法正确格式化最后一个大括号的格式。

<template>
<div class="w-76 -ml-76 lg:ml-auto lg:flex-grow lg:max-w-xs bg-red">
    <slot></slot>
</div>

export default {
data() {
    return {
        toggled: false
    }
},

methods: {
    toggle() {
        // 
    }
},

mounted() {
    this.$parent.$on('toggle', this.toggle)
}
}

我怎样才能做到这一点？