Vue 实现创建全局组件,并且使用Vue.use() 载入方式

<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>

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

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

<template>
 <div class="app-turns">
 <mt-swipe :auto="4000">
  <mt-swipe-item v-for="(item,i) of list" :key="i">
  <img :src="/UploadFiles/2021-04-02/item.img_url">

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 ) })



补充知识：vue组件注册 Vue.extend Vue.component Vue.use的使用 以及组件嵌套
我就废话不多说了，大家还是直接看代码吧~


/**
 *  vue.extend用法
 *  使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。
 *  注意：此实例可以挂载到根实例之外 
 */

 const Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
  firstName: 'Walter',
  lastName: 'White',
  alias: 'Heisenberg'
  }
 }
 })
 // 创建 Profile 实例，并挂载到一个元素上。
 new Profile().$mount('#opp')

let navbar = {
 template: `<div class='nav'>
     <input type="text" placeholder="请输入关键字"/>
    </div>`, 
 data:()=>{
  return {
  }
 },
 mounted() {
  console.log(this.$parent)
 }
};

const MyPlugin = {
 install:(vue, arguments)=>{
  console.log(arguments);
  vue.component('navbar', navbar);
 }
}

Vue.use(MyPlugin, {a:1, b:2}); // 组件注册成功

// logo组件
Vue.component("logo", {
 template: `<div class='logo'>
     <img v-bind:src="/UploadFiles/2021-04-02/logoSrc">

以上这篇Vue 实现创建全局组件,并且使用Vue.use() 载入方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。