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

Question

我有以下...

PageHeader.vue

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

app.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

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

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

Answer 2

<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>