多个组件全局注册 - 全局组件

小草莓蹦蹦跳

已于 2023-10-13 18:35:58 修改

阅读量1.6k

点赞数

分类专栏： Vue1.x和Vue2.x 文章标签： javascript 前端 vue.js

于 2019-07-12 15:30:16 首次发布

本文链接：https://blog.csdn.net/qq_38290251/article/details/95622777

版权

Vue1.x和Vue2.x 专栏收录该内容

81 篇文章 6 订阅

订阅专栏

foot.vue

<template>
  <div class="foot">
    <img src="../assets/foot/foot.jpg" alt="">
  </div>
</template>

<script>
export default {
  name: 'lzqFoot',
  data () {
    return {
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.foot {
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  display: flex;
}

.foot img{
  width: 750px;
  height: 755px;
}
</style>

index.js

import Vue from 'vue'
import Foot from './foot'


// 组件对象
const components = {
  Foot
}

// 组件全局注册 ---s
Object
  .keys(components)
  .forEach(key => {
    Vue.component(`Lzq${key}`, components[key])
  })
// 组件全局注册 ---e