做vue项目的时候,总有一些小组件或者工具类,我们需要频繁的使用,每个使用的地方再去引用相对比较麻烦,当然也有一些好处,尤其是配合组件异步加载的时候,能最更好的减少项目首次加载的体积,从而优化一些体验。

全局js插件

因为vue3.x js插件的全局使用也有调整,这里稍微说下简易的全局js引入。

#比如,有tools.js如下:

const tools = {
isIos: function () {
const agent = navigator.userAgent;
return !!agent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
},
} export default tools

# main.js 如下引入

import tools from '@/utils/tools'
app.config.globalProperties.$tools = tools;

在组件内就可以如此使用了

console.log(this.$tools.isIos());

全局vue组件

1、简易实用

正常定一个组件,如:global-component.vue,并且实现这个组件。

# main.js 里面,引入如下:

import GlobalComponent from '@/components/global-component.vue'
app.component('global-component', GlobalComponent)

现在可以直接在项目中的其他组件里面直接使用GlobalComponent这个组件了,使用如下:

<template>
<global-component></global-component>
</template>

2、优雅

正常定一个组件,如:global-component.vue,并且实现这个组件。

新建一个js文件,如:global-comp.js,实现如下:

import GlobalComponent from './global-component.vue'

export default {
install:function(Vue){
Vue.component('global-component', GlobalComponent);
}
}

# main.js 里面使用这个js:

import GlobalComponent from '@/components/global-comp.js'
app.use(GlobalComponent)

现在可以直接在项目中的其他组件里面直接使用GlobalComponent这个组件了,使用如下:

<template>
<global-component></global-component>
</template>

注意事项:(组件名大小写)

在字符串模板或单个文件组件中定义组件时,定义组件名的方式有两种:

1、使用 kebab-case

当使用 kebab-case (短横线分隔命名) 定义一个组件时,你也必须在引用这个自定义元素时使用 kebab-case,例如 。

app.component('my-component-name', {
/* ... */
})

2、使用 PascalCase

当使用 PascalCase (首字母大写命名) 定义一个组件时,你在引用这个自定义元素时两种命名法都可以使用。也就是说 和 都是可接受的。注意,尽管如此,直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。

app.component('MyComponentName', {
/* ... */
})

vue3.x全局插件和组件的更多相关文章

  1. 【vue3】封装自定义全局插件

    [vue3]封装自定义全局插件 原vue2方法 main.js import Vue from 'vue' import App from './App.vue' import router from ...

  2. VUE3 之 全局组件与局部组件

    1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法  <body> < ...

  3. 开发vue全局插件的4种方式

    定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...

  4. vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件

    基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...

  5. vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件

    如果你的vue2代码之前是使用vue-class-component 类组件模式写的.选择可以使用 https://github.com/facing-dev/vue-facing-decorator ...

  6. [PHP]全局使用 Composer 组件的思路

    /** * 全局使用 composer 组件的步骤: * * 1. 建一个包含所有需要全局使用的composer包的项目. * 如:globalVendor/ * composer init 初始化 ...

  7. vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件

    vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...

  8. vue2.0 仿手机新闻站(五)全局的 loading 组件

    1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...

  9. Vue学习之全局和私有组件小结(七)

    一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...

随机推荐

  1. SciPy笔记

    一.简介 SciPy 是一个开源的 Python 算法库和数学工具包.Scipy 是基于 Numpy 的科学计算库,用于数学.科学.工程学等领域,很多有一些高阶抽象和物理模型需要使用 Scipy.Sc ...

  2. NOIP模拟38:b

      这是T2.   一个容斥(其实也可以欧拉反演做,但是我不会).   首先开一个桶,记录第i行的j有多少个.   然后枚举1-\(maxn\),枚举他的值域内的倍数,记录倍数在第i行有多少个,将个数 ...

  3. ansible 批量安装yum包

    1.首先安装一下ansible yum install ansible 2.修改一下ansible的参数以防ssh过去的时候需要首次判断yes  或者no sed -i 's/#host_key_ch ...

  4. 论文解读(SimCLR)《A Simple Framework for Contrastive Learning of Visual Representations》

    1 题目 <A Simple Framework for Contrastive Learning of Visual Representations> 作者: Ting Chen, Si ...

  5. 一起搞懂PHP的错误和异常(三)

    关于错误与异常的最后一篇文章,我们来进行一些总结. PHP中错误和异常的区别 通过前面两篇文章的学习,我们来直接将错误和异常摆上来进行对比,看看他们的区别与联系: 错误的出现通常是语法或编译运行时错误 ...

  6. DEDEcms手机网站添加详情内页上一页/下一页的翻页功能

    修改文件include/arc.archives.class.php文件. 1.搜索 function GetPreNext($gtype='') 2.将这个函数的所有内容替换为 function G ...

  7. Java基础系列(20)- while循环

    循环结构 while循环 do-循环 for循环 在java5中引入了一种主要用于数组的增强型for循环 while循环 while是最基本的循环,它的结构为 while(布尔表达式){ //循环内容 ...

  8. linux,apache,php,mysql常用的查看版本信息的方法

    1. 查看linux的内核版本,系统信息,常用的有三种办法:   uname -a:   more /etc/issue;    cat /proc/version; 2. 查看apache的版本信息 ...

  9. Maven项目创建与配置(二)

    项目配置 1:添加Source Folder 右击项目>NEW>Source Folder maven规定必须创建一下几个Source Folder src/main/resources ...

  10. cas的基础配置

    去除HTTPS的j基础认证方式 cas的:deployerConfigContext.xml <!-- Required for proxy ticket mechanism. -->&l ...