无法将Vue组件嵌入使用Vue Material的md-app中

别担心，我之前也踩过这个坑——Vue Material的md-app有它自己的布局结构规则，只要把自定义组件放在正确的位置，再检查几个核心点就能搞定。

第一步：确保md-app的结构符合规范 #

Vue Material的md-app依赖特定的子组件来管理布局，其中**md-app-content是承载页面内容的核心容器**，你的自定义组件必须放在这个容器内部，否则Vue Material的布局系统不会渲染它。

给你一个正确的App.vue示例参考：

<template>
  <md-app>
    <!-- 可选的顶部导航栏 -->
    <md-app-toolbar>
      <span class="md-title">我的应用</span>
    </md-app-toolbar>

    <!-- 必须的内容容器：自定义组件一定要放在这里面 -->
    <md-app-content>
      <page-header></page-header> <!-- 你的自定义组件 -->
    </md-app-content>

    <!-- 可选的侧边栏/底部导航等 -->
    <md-app-drawer md-permanent="left">
      <!-- 侧边栏内容 -->
    </md-app-drawer>
  </md-app>
</template>

<script>
// 如果没全局注册自定义组件，一定要在这里局部注册
import PageHeader from './PageHeader.vue'

export default {
  components: {
    PageHeader
  }
}
</script>

第二步：检查自定义组件的注册是否正确 #

如果你的PageHeader.vue没有全局注册，必须在App.vue或父组件的components选项里完成局部注册（就像上面示例那样）。如果是全局注册，要确保在调用Vue.use(VueMaterial)之后执行注册，比如：

// main.js
import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import PageHeader from './PageHeader.vue'

Vue.use(VueMaterial)
Vue.component('page-header', PageHeader) // 全局注册组件

new Vue({
  el: '#app',
  render: h => h(App)
})

第三步：排查组件本身的显示问题 #

• 先确认PageHeader.vue的模板有可见内容，比如不要是空模板或者被v-if条件意外隐藏：

  <!-- PageHeader.vue 示例，确保有可渲染的内容 -->
  <template>
    <div class="page-header">
      <h2>这是我的自定义头部组件</h2>
    </div>
  </template>
  

• 打开浏览器开发者工具的Elements面板，看看自定义组件的DOM节点是否存在——有时候组件已经渲染了，只是被样式隐藏了。如果DOM存在但看不见，检查组件的CSS是否和Vue Material的内置样式冲突。

第四步：确认Vue Material的初始化完整 #

你已经调用了Vue.use(VueMaterial)，还要确保引入了它的样式文件，否则布局可能异常，间接导致自定义组件无法正常显示：

// main.js里必须添加这行样式引入
import 'vue-material/dist/vue-material.min.css'

按上面的步骤排查一遍，应该就能让你的自定义组件在md-app内正常显示了。

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