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 相关文章推荐
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 Javascript
JQuery魔力之$(&quot;tagName&quot;)与selector
Mar 05 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
jquery移除、绑定、触发元素事件使用示例详解
Apr 10 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
jQuery往textarea中光标所在位置插入文本的方法
Jun 26 Javascript
跟我学习javascript的prototype使用注意事项
Nov 17 Javascript
js微信应用场景之微信音乐相册案例分享
Aug 11 Javascript
详细教你微信公众号正文页SVG交互开发技巧
Jul 25 Javascript
jQuery中DOM常见操作实例小结
Aug 01 jQuery
element中table高度自适应的实现
Oct 21 Javascript
全面解析js中的原型,原型对象,原型链
Jan 25 Javascript
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
了解咖啡雨林联盟认证 什么是雨林认证 雨林认证是什么意思
2021/03/05 新手入门
第三节 定义一个类 [3]
2006/10/09 PHP
php 操作调试的方法
2012/07/12 PHP
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
PHP扩展安装方法步骤解析
2020/11/24 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
什么是Node.js?Node.js详细介绍
2014/06/01 Javascript
javascript 面向对象封装与继承
2014/11/27 Javascript
深入理解jQuery之事件移除
2016/06/02 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
vue-router项目实战总结篇
2018/02/11 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
js遍历添加栏目类添加css 再点击其它删除css【推荐】
2018/06/12 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
2018/08/28 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
2019/03/28 Javascript
python爬取网站数据保存使用的方法
2013/11/20 Python
Python运算符重载用法实例分析
2015/06/01 Python
Python中的__slots__示例详解
2017/07/06 Python
Python内存读写操作示例
2018/07/18 Python
使用python对文件中的单词进行提取的方法示例
2018/12/21 Python
python pygame实现方向键控制小球
2019/05/17 Python
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
Python帮你微信头像任意添加装饰别再@微信官方了
2019/09/25 Python
css3实现背景模糊的三种方式(小结)
2020/05/15 HTML / CSS
英国马匹装备和马术用品购物网站:Equine Superstore
2019/03/03 全球购物
英国在线药房:Express Chemist
2019/03/28 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
《莫高窟》教学反思
2014/02/25 职场文书
中餐厅经理岗位职责
2014/04/11 职场文书
读群众路线的心得体会
2014/09/03 职场文书
股东授权委托书范本
2014/09/13 职场文书