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

Question

我有以下...

页眉.vue

<template>
  <span> ${message} </span>
</template>
<script>
    export default{
      data: function(){
        return {message: "asdsad" };
      }
    }
</script>

应用程序.vue

<template>
<jg-header></jg-header>  
</template>
<script>
  import PageHeader from "./PageHeader.vue"
  export default{
    components: {
      "jg-header": PageHeader
    }
  }
</script>

这很好用，所以我想将它转换为使用 Vue Material，所以我将 app.vue 更改为这个......

<template>
  <md-app> <jg-header></jg-header> </md-app>  
</template>
<script>
  import PageHeader from "./PageHeader.vue"
  export default{
    components: {
      "jg-header": PageHeader
    }
  }
</script>

它似乎是创建和渲染 Vue 材质组件，但是，自定义组件并没有出现在任何地方。如何让 Vue 组件在 md-app 中实际呈现

更新

由于存在一些混淆，我创建了一个名为 Vue.use 的 Vue 应用程序（因此它呈现的原因）

Vue.use(VueMaterial);
new Vue(App).$mount("#my-id");

Answer 1

<md-app>有特定的内容元素。将您的内容包装在<md-app-content>.

代替：

<template>
  <md-app> <jg-header></jg-header> </md-app>  
</template>

做：

<template>
   <md-app>
      <md-app-content>
         <jg-header></jg-header>
      <md-app-content>
   </md-app>  
</template>

或者，使用工具栏：

<template>
   <md-app>
      <md-app-toolbar> ... </md-app-toolbar>
      <md-app-content>
         <jg-header></jg-header>
      <md-app-content>
   </md-app>  
</template>

Answer 2

尝试使用 div 将标签包装在模板内：

<template>
  <div>
   <md-app> 
    <jg-header></jg-header>
   </md-app>
  </div>
</template>