为何Vue.js中媒体查询无法实现组件的显示与隐藏切换？

嘿，这个问题我之前也碰到过！核心原因是你在HTML里用了错误的自定义组件写法——自闭合标签在这里行不通。

为啥会出现这种情况？ #

标准HTML的规则里，只有像<img>、<br>这种原生的“空元素”才能用<xxx />这种自闭合写法。对于我们自己定义的Vue组件（比如main-nav、menu-nav），浏览器的HTML解析器根本不认自闭合标签，它会把<main-nav />当成一个没闭合的<main-nav>标签，后面的<menu-nav />直接被塞进这个未闭合的标签里当子元素了。

最终渲染出来的DOM结构其实是这样的：

<div id="nav-app">
  <main-nav>
    <menu-nav>
      <div id="menu-nav"></div>
    </menu-nav>
  </main-nav>
</div>

你看，当屏幕缩小到840px以下时，你的CSS让#main-nav隐藏了，那它里面的menu-nav自然也跟着被藏起来了，所以你看不到它。

怎么修复？ #

很简单，把HTML里的自闭合组件标签改成完整的闭合形式就行：

<div id="nav-app">
  <main-nav></main-nav>
  <menu-nav></menu-nav>
</div>

这样浏览器就能正确识别两个独立的组件，媒体查询的CSS也能正常工作——屏幕小于840px时，main-nav隐藏，menu-nav正常显示。

小补充：如果是在Vue单文件组件（.vue）的<template>里，自闭合标签是可以用的，因为Vue自己的模板编译器会正确处理，但在普通HTML文件里直接写就不行啦。

内容的提问来源于stack exchange，提问作者amachree tamunoemi