vue组件全局注册 写法和用法

香菊网 发表于: 2019-04-09 分类: H5部分  front  HTML&CSS  js部分  

如果每个或者多个模板中有使用到相同的组件,需要每个都注册一遍比较麻烦,下面就是全局下注册一个组件模板下直接引用,增加组件的复用性。

1、main.js

import Vue from 'vue'
import App from './App'
import router from './router'

...
import register from './components/registerComponents'

2、registerComponents.js

// 引入组件
import topHead from './topHead/index.vue'

// 全局注册
export default {
  install (Vue) {
    Vue.component('topHead', topHead)
  }
}

3、使用的页面 *.vue

<template>
   <topHead :headTitle="nowTitle" :onBack="goBack"></topHead>
   ...

</template>

<script>

   ...
</script>
<style lang="less" scoped>

   ...
</style>

最后:

   模板里面就不用注册了 全局下可以使用该组件了

标签: H5部分frontHTML&CSSjs部分
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮