更新

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材质，所以我将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应用程序，我称之为Vue.use（因此它呈现的原因）

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包装模板内的标签：

['property_1','property_2']

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

更新

2 个答案: