无法使用 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 material 组件，但是，自定义组件没有显示在任何地方。如何让 Vue 组件在 md-app

中实际呈现

更新

由于有些混乱，我创建了我调用的 Vue 应用程序 Vue.use（这就是它呈现的原因）

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

Answer 1

Try wrapping the tags inside template with a 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>

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

Can't Embed Vue Component into an md-app using Vue Material

vue-component

vuejs2

vue-material

更新