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 入门级学习笔记及源码
Jan 22 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
javascript采用数组实现tab菜单切换效果
Dec 12 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
vue实现点击关注后及时更新列表功能
Jun 26 Javascript
微信小程序实现授权登录
May 15 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
也谈php网站在线人数统计
2008/04/09 PHP
用js进行url编码后用php反解以及用php实现js的escape功能函数总结
2010/02/08 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
解析PHP之提取多维数组指定列的方法
2017/01/03 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
javascript 当前日期转化为中文的实现代码
2010/05/13 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
js tab栏切换代码实例解析
2019/09/03 Javascript
vue实现登录功能
2020/12/31 Vue.js
python 调用win32pai 操作cmd的方法
2017/05/28 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
人工神经网络算法知识点总结
2019/06/11 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python+OpenCV实现图像的全景拼接
2020/03/05 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
你对IPv6了解程度
2016/02/09 面试题
机械绘图员岗位职责
2013/11/19 职场文书
会计出纳岗位职责
2013/12/25 职场文书
《我为你骄傲》教学反思
2014/02/20 职场文书
年终晚会主持词
2014/03/25 职场文书
公务员更新知识培训实施方案
2014/03/31 职场文书
就业协议书范本
2014/04/11 职场文书
《月亮湾》教学反思
2014/04/14 职场文书
建筑工地大门标语
2014/06/18 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
漫画「古见同学有交流障碍症」第25卷封面公开
2022/03/21 日漫