Vue中创建全局组件,并且使用Vue.use() 载入。

自定义vue组件,一般是局部引用的方式载入,使用的时候,在应用的组件中使用 import moduleName from ‘module’ 导入,在components中注册

<template>
  <div class="app-NewsInfo">
    <h3>{{info.title}}</h3>
    <!-- 新闻评论子组件。 -->
    <comment :id="id"></comment>
  </div>
</template>
<script>
import comment from "../sub/comment.vue";
export default {
  data() {
    return {
      info: {},
      id: this.$route.query.id
    };
  },
  methods: {},
  components: {
    comment
  },
</script>

那么如果某个组件经常复用,岂不是每次在新组建中引用都要导入一次吗?是的 。这种情况下可以将组件封装成全局组件,一次导入之后,全局都可以使用。 虽然这种做法不太常见,但是这里还是将其整理出来。

1.首先创建一个文件夹loading

用来保存需要全局引用的组件,并且存放一些配置文件。

在这里插入图片描述

2.创建一个loading.vue的组件。

该组件中除了组件的基础结构,并无其他内容。它的作用是用来加载准备自定义的组件,最后将loading组件加载到全局的Vue中,这样就一次性完成了所有自定义组件的加载,非常方便。

<template>
  <div class="loading"></div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {}
};
</script>
<style scoped>
</style>

3.创建自定义组件

这里以一个简单封装的mint-ui轮播图为例。

<template>
  <div class="app-turns">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,i) of list" :key="i">
        <img :src="item.img_url" @click="detail" :data-id="item.id">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
export default {
  name: "navbar",
  props: ["list"], //接收父组件数据
  data() {
    return {
    };
  },
  methods: {
    detail(e) {
      var id = e.target.dataset.id;
      var url = `/GoodsInfo/${id}`;
      this.$router.push(url);
    }
  },
  created() {}
};
</script>
<style scoped>
.mint-swipe {
  height: 150px;
}
.mint-swipe img {
  width: 100%;
}
</style>

4.创建index.js,用来导出所有自定义组件。

import turns from './turns.vue'

const loading = {
  install: function (Vue) {
    Vue.component('turns', turns)
  }
}

export default loading;

其实到这里组件封装就结束了,下面再演示下如何使用。

5.在main.js中,导入并使用loading组件。

import loading from './lib/loading';

Vue.use(loading);

这样就将组件全局引用成功了!

6.在需要使用的地方,直接使用组件名即可。

<template>
  <div class="app-home">
  
    <turns :list="list"></turns>
    
  </div>
</template>

通过这种方式,就能实现组件的全局引用。
这种做的好处是对于复用性非常高的组件,省去了每次导入的麻烦;
缺点是无法直观的看到组件引入和注册,对于不清楚的人来说看不懂组件名的意义。

其实官方文档中已经提到了一种解决方案:

https://cn.vuejs.org/v2/guide/components-registration.html#基础组件的自动化全局注册

基础组件的自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素,是相对通用的。我们有时候会把它们称为基础组件,它们会在各个组件中被频繁的用到。

所以会导致很多组件里都会有一个包含基础组件的长列表:

import BaseButton from ‘./BaseButton.vue’ import BaseIcon from
‘./BaseIcon.vue’ import BaseInput from ‘./BaseInput.vue’

export default { components: {
BaseButton,
BaseIcon,
BaseInput } } 而只是用于模板中的一小部分:

<BaseInput v-model=“searchText” @keydown.enter=“search” />
<BaseButton @click=“search”>
幸好如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+),那么就可以使用
require.context 只全局注册这些非常通用的基础组件。这里有一份可以让你在应用入口文件 (比如 src/main.js)
中全局导入基础组件的示例代码:

import Vue from ‘vue’ import upperFirst from ‘lodash/upperFirst’
import camelCase from ‘lodash/camelCase’

const requireComponent = require.context( // 其组件目录的相对路径
‘./components’, // 是否查询其子目录 false, // 匹配基础组件文件名的正则表达式
/Base[A-Z]\w+.(vue|js)$/ )

requireComponent.keys().forEach(fileName => { // 获取组件配置 const
componentConfig = requireComponent(fileName)

// 获取组件的 PascalCase 命名 const componentName = upperFirst(
camelCase(
// 剥去文件名开头的 ./ 和结尾的扩展名
fileName.replace(/^./(.*).\w+$/, ‘$1’)
) )

// 全局注册组件 Vue.component(
componentName,
// 如果这个组件选项是通过 export default 导出的,
// 那么就会优先使用 .default
// 否则回退到使用模块的根。
componentConfig.default || componentConfig ) })

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值