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


Posted in Javascript onAugust 11, 2020

自定义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

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

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

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

补充知识: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="logoSrc">
    </div>`,
 inject: ['logoSrc'],  
 data:()=>{
  return {
  }
 },
 mounted() {
  console.log(this.$parent)
 }
})
// header组件 组件调用 provie inject传值
Vue.component("buttoncounter", {
 template: `<div class='header'>
    <logo></logo>
    {{header}}
    </div>`,
 provide:{
  logoSrc:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1582433251882&di=de459decf2e157552b97a4879ae4135d&imgtype=0&src=http%3A%2F%2Fwww.suntop168.com%2Fblog%2Fzb_users%2Fupload%2F2014%2F2%2Fadf89182.jpg'
 },
 data:()=>{
  return {
   header:'我是头部导航栏'
  }
 },
 mounted() {
  console.log(this.$parent)
 }
});

// vue根实例
let vm = new Vue({
 el:"#app",
 data:{
  name: 'Marry'
 },
 mounted(){
  console.log('vue根实例初始化完毕')
 }
})

console.log(vm);

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

Javascript 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
jquery实现网站超链接和图片提示效果
Mar 21 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
使用Curl命令查看请求响应时间方法
Nov 04 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
详解基于vue-cli优化的webpack配置
Nov 06 Javascript
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
JavaScript遍历数组和对象的元素简单操作示例
Jul 09 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
Vue自定义全局弹窗组件操作
Aug 11 #Javascript
基于Vue全局组件与局部组件的区别说明
Aug 11 #Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 #Javascript
vue实现图片按比例缩放问题操作
Aug 11 #Javascript
JavaScript中while循环的基础使用教程
Aug 11 #Javascript
vue-cli3 引入 font-awesome的操作
Aug 11 #Javascript
js实现列表按字母排序
Aug 11 #Javascript
You might like
JAVA/JSP学习系列之四
2006/10/09 PHP
php数字转汉字代码(算法)
2011/10/08 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
阿里对象存储OSS在laravel框架中的使用方法
2019/10/13 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
js中各浏览器中鼠标按键值的差异
2011/04/07 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
js克隆对象、数组的常用方法介绍
2013/09/26 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
Javascript仿新浪游戏频道鼠标悬停显示子菜单效果
2015/08/21 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
详解Angular.js指令中scope类型的几种特殊情况
2017/02/21 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
vue组件学习教程
2017/09/09 Javascript
jQuery实现动态生成年月日级联下拉列表示例
2019/05/11 jQuery
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
Python获取系统默认字符编码的方法
2015/06/04 Python
Python进度条实时显示处理进度的示例代码
2018/01/30 Python
在Python中居然可以定义两个同名通参数的函数
2019/01/31 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
CSS3实现背景透明文字不透明的示例代码
2018/06/25 HTML / CSS
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
大一学生的职业生涯规划书范文
2014/01/19 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
教师评语大全
2014/04/28 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
师德师风自查总结
2014/10/14 职场文书
先进典型事迹材料
2014/12/29 职场文书
2015年征兵工作总结
2015/07/23 职场文书