RalapEdi的学习之路

在学习Vue组件时，我在main.js注册了一个全局组件。如下：

import  Vue  from  'vue'
import  App  from  './App'
import  router  from  './router'
import  _  from  'lodash'
import  com1  from  '@/components/com1'

Vue.config.productionTip  =  false
Vue.prototype._  =  _  // 引入如lodash

new  Vue({
el:  '#app',
router,
components: { App },
template:  '<App/>'
})
Vue.component("com", com1)

main.js

<template  lang="">
   <div>
      <com></com>
   </div>
</template>

ex8.vue

初次进入ex8.vue时可以显示该组件。

但是刷新后组件就不再显示，经过多方查证，发现是挂载位置出现问题

修改main.js

import  Vue  from  'vue'
import  App  from  './App'
import  router  from  './router'
import  _  from  'lodash'
import  com1  from  '@/components/com1'
  
Vue.config.productionTip  =  false
Vue.prototype._  =  _  // 引入如lodash
Vue.component("com", com1)  // 在new Vue之前挂载
new  Vue({
el:  '#app',
router,
components: { App },
template:  '<App/>'
})

查阅后得知：挂载全局组件需在new Vue之前挂载。