为什么我的嵌套 Vue 模板文件不渲染？

Question

我有三个主要的 Vue 文件：

index.vue.js：

<template>
  <div class="tax-map-wrapper">
    <h1>this is the page the map renders</h1>
    <Map/>
  </div>
</template>

<script>
  import Map from './components/Map.vue';
  export default {

  }
</script>

地图.vue：

<template>
  <div>
    <h1>MAP TESTER</h1>
  </div> 
</template>

<script>
  console.log("map")
  import Pagination from './Pagination.vue';
  import { debounce } from '../helpers/util.js'
  export default {

  }
</script>

<style scoped></style>

地图.vue：

<template>
  <div>
    <h1>MAP TESTER</h1>
  </div>
</template>

<script>
  console.log("pagination")
  export default {
  }
</script>

<style scoped></style>

当我的应用程序加载时，我可以在浏览器中看到“这是地图呈现的页面”，这意味着 index.vue 文件很好，它的模板内容显示在 bowser 上。

但是，当 Map 组件从不渲染时，Pagination 也不会嵌套在 Map.vue 模板文件中。 在我的控制台中，我可以看到“地图”和“分页”的控制台日志，这意味着这些文件正在被命中。 但是，不会呈现与这两个文件关联的模板。 borwser 没有显示任何错误。 在“这是地图页面呈现的页面”下它只是空白。

这是我的 tax_map.js：

import Vue from 'vue';
import Map from '../tax_map/index.vue';

Vue.use(Map)
document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: '#tax-map-wrapper',
    render: h => h(Map)
  })

})

这是我的 tax_map.html.erb：

<%= javascript_pack_tag 'tax_map' %>
<div id="tax-map-wrapper"></div>

任何人都知道为什么 index.vue 中的组件不渲染？ 任何帮助表示赞赏，谢谢！

Answer 1

在index.vue.js ，您的代码使用了 Map 组件（考虑更改它，因为它会隐藏Javascript Map 对象）； 它虽然没有注册它。

在使用 Webpack 等构建系统编写 Vue 应用程序时，您可以找到有关组件本地注册的文档。

在index.vue的模块导出中，将Map注册为组件。

<script>
  import Map from './components/Map.vue';
  export default {
    components: {
      Map
    }
  }
</script>