vue3.x全局插件和组件
做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全局插件和组件的更多相关文章
- 【vue3】封装自定义全局插件
[vue3]封装自定义全局插件 原vue2方法 main.js import Vue from 'vue' import App from './App.vue' import router from ...
- VUE3 之 全局组件与局部组件
1. 概述 老话说的好:忍耐是一种策略,同时也是一种性格磨炼. 言归正传,今天我们来聊聊 VUE 的全局组件与局部组件. 2. 全局组件 2.1 不使用组件的写法 <body> < ...
- 开发vue全局插件的4种方式
定义全局插件的步骤 定义全局插件 pluginsUtil.js Vue.js 的插件应当有一个公开方法 install .这个方法的第一个参数是 Vue 构造器,第二个参数是一个可选的选项对象: ex ...
- vue3系列:vue3.0自定义弹框组件V3Popup|vue3.x手机端弹框组件
基于Vue3.0开发的轻量级手机端弹框组件V3Popup. 之前有分享一个vue2.x移动端弹框组件,今天给大家带来的是Vue3实现自定义弹框组件. V3Popup 基于vue3.x实现的移动端弹出框 ...
- vue2升级vue3:Vue Demij打通vue2与vue3壁垒,构建通用组件
如果你的vue2代码之前是使用vue-class-component 类组件模式写的.选择可以使用 https://github.com/facing-dev/vue-facing-decorator ...
- [PHP]全局使用 Composer 组件的思路
/** * 全局使用 composer 组件的步骤: * * 1. 建一个包含所有需要全局使用的composer包的项目. * 如:globalVendor/ * composer init 初始化 ...
- vue教程3-03 vue组件,定义全局、局部组件,配合模板,动态组件
vue教程3-03 vue组件,定义全局.局部组件,配合模板,动态组件 一.定义一个组件 定义一个组件: 1. 全局组件 var Aaa=Vue.extend({ template:'<h3&g ...
- vue2.0 仿手机新闻站(五)全局的 loading 组件
1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...
- Vue学习之全局和私有组件小结(七)
一.组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用相应的组件即可. 二.组件和模块: 1.模块化:是从代码逻 ...
随机推荐
- SciPy笔记
一.简介 SciPy 是一个开源的 Python 算法库和数学工具包.Scipy 是基于 Numpy 的科学计算库,用于数学.科学.工程学等领域,很多有一些高阶抽象和物理模型需要使用 Scipy.Sc ...
- NOIP模拟38:b
这是T2. 一个容斥(其实也可以欧拉反演做,但是我不会). 首先开一个桶,记录第i行的j有多少个. 然后枚举1-\(maxn\),枚举他的值域内的倍数,记录倍数在第i行有多少个,将个数 ...
- ansible 批量安装yum包
1.首先安装一下ansible yum install ansible 2.修改一下ansible的参数以防ssh过去的时候需要首次判断yes 或者no sed -i 's/#host_key_ch ...
- 论文解读(SimCLR)《A Simple Framework for Contrastive Learning of Visual Representations》
1 题目 <A Simple Framework for Contrastive Learning of Visual Representations> 作者: Ting Chen, Si ...
- 一起搞懂PHP的错误和异常(三)
关于错误与异常的最后一篇文章,我们来进行一些总结. PHP中错误和异常的区别 通过前面两篇文章的学习,我们来直接将错误和异常摆上来进行对比,看看他们的区别与联系: 错误的出现通常是语法或编译运行时错误 ...
- DEDEcms手机网站添加详情内页上一页/下一页的翻页功能
修改文件include/arc.archives.class.php文件. 1.搜索 function GetPreNext($gtype='') 2.将这个函数的所有内容替换为 function G ...
- Java基础系列(20)- while循环
循环结构 while循环 do-循环 for循环 在java5中引入了一种主要用于数组的增强型for循环 while循环 while是最基本的循环,它的结构为 while(布尔表达式){ //循环内容 ...
- linux,apache,php,mysql常用的查看版本信息的方法
1. 查看linux的内核版本,系统信息,常用的有三种办法: uname -a: more /etc/issue; cat /proc/version; 2. 查看apache的版本信息 ...
- Maven项目创建与配置(二)
项目配置 1:添加Source Folder 右击项目>NEW>Source Folder maven规定必须创建一下几个Source Folder src/main/resources ...
- cas的基础配置
去除HTTPS的j基础认证方式 cas的:deployerConfigContext.xml <!-- Required for proxy ticket mechanism. -->&l ...