為什么我的嵌套 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>