Vue.js Vue-在父模板内的多个位置之一渲染组件

我正在构建一个响应性的导航栏组件，该组件使用子组件，我需要在移动和桌面版本中以不同的方式显示该组件，标记不允许我轻松地做到这一点。目前，我在两个地方复制了一个元素，并根据窗口大小一次隐藏其中一个元素，只要用户不改变窗口大小就可以了，如果她改变了窗口大小，它就会变得丑陋-例如，如果窗口缩小到手机的宽度，桌面宽度可见的弹出窗口就会消失

编辑

+现在，我在Navbar中的两个位置显示组件搜索字段，看到我需要在Navbar面板上显示桌面版本和移动版本汉堡包下拉列表，后者对于桌面是隐藏的。下面的代码示例解释了我的意思，子组件的名称是SearchRecords，css框架是Bulma。想法是一次只显示一个，但我不能使用媒体查询或v-if方法，因为我必须同步这两个组件，我想知道是否有一些简单的方法来处理这个问题：

<header class="nav">
    <div class="container">
        <div class="nav-left">
            Logo placeholder
        </div>
        <div class="nav-right is-hidden-tablet">
            <a class="nav-item is-pulled-right">
                <search-records></search-records>
            </a>
        </div>
        <span class="nav-toggle">
          <span></span>
          <span></span>
          <span></span>
        </span>
        <div class="nav-right nav-menu">
            <a class="nav-item is-pulled-right is-hidden-mobile">
                <search-records></search-records>
            </a>
        </div>
    </div>
</header>

---

试试这种方法。下面是模板的外观

<template>
  <div class="wrapper">
    <div v-if="isMobile" class="desktop-view">Desktop</div>
    <div v-else class="mobile-view">Mobile</div>
  </div>
</template>

您的组件脚本应该如下所示

export default {
  data() {
    isMobile: false,
  },

  methods: {
    onResize() {
      this.isMobile = window.innerWidth < 720
    },
  },

  mounted() {
    this.onResize()
    window.addEventListener('resize', this.onResize)
  },

  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
  }
}

---

您是否在问，响应媒体查询，重新排列DOM的最佳方式是什么？您在问什么？你试过什么但没有成功？另外：如果没有代码，没有人会知道你做了什么。@Herrbishoff-我编辑了这个问题。@DecadeMoon-我很好奇是否有办法在两个地方复制组件的可视部分-也就是说，在我的例子中，将有两个输入字段-两个共享状态的组件。虽然看起来我最终会跟踪浏览器的宽度，并使用类绑定将导航栏菜单转换为下拉菜单。