挂载/卸载 vue 组件取决于屏幕大小tailwind/vue

编程问答 2022-05-17

问题描述

对于不同的屏幕尺寸，我需要两个不同的组件。 我试着用一个简单的隐藏标志来决定加载哪个组件

<div>
  <ComponentA class="hidden sm:flex" />
  <ComponentB class="sm:hidden" />
</div>

这里的问题是，我的 ComponentA 类中有一个已安装和未安装的函数。不管 ComponentA 是否隐藏，这个函数似乎都会被执行。

  mounted() {
this.$store.commit('doSomething')
 },destroyed() {
 this.$store.commit('removeSomething')
},

当在小屏幕上时，我希望 ComponentB 处于 ComponentB 已被破坏/从未安装过的状态。或者如果我在小屏幕上，可以防止 ComponentA 挂载。

无论如何要存档吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

componentscomponentslifecyclelifecycle