引入一个自定义组件库能在全局使用该组件配置的方法

于 2022-03-31 18:04:52 发布
阅读量1.2k 收藏
点赞数
分类专栏： vue的使用 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37734787/article/details/123879359
版权

manage-list组件库的文件组成结构
在这里插入图片描述

在main.js配置

import Vue from 'vue';
import manageList from './components/manage-list';
Vue.use(manageList);

然后就在vue文件中直接像上面图片，有划线的文件名称那样直接当作标签来使用
在这里插入图片描述

小也同学
关注
专栏目录
Vue中自定义全局组件的实现方法
10-18
当你有一个组件需要在多个地方被引用时，定义全局组件可以避免在每个使用它的文件中都进行import导入，从而降低代码的冗余。以下是实现Vue中自定义全局组件的详细步骤： 1. **编写组件**： 首先，你需要创建一个...
require.context()的用法详解
热门推荐
diaojw090的博客
12-07 4万+
require.context(directory,useSubdirectories,regExp) directory:表示检索的目录 useSubdirectories：表示是否检索子文件夹 regExp:匹配文件的正则表达式,一般是文件名 例如 require.context("@/views/components",false,/.vue$/) 1、常常用来在组件内引入多个组件。 const path = require('path') const files = require.contex
自定义组件及其使用（全局、局部）
Joe_yuqiao的博客
06-23 194
（1）自定义组件.vue // noData.vue <template> <div> <p>noData...</p> </div> </template> <script></script> <style></style> （2）封装、导出 // index.js i
全局组件导入方式
Locker的博客
07-13 674
这次写的主要是webpack方面的， 首先是组件方面的导出 假如我在components文件夹中定义了一个global文件夹用来存放公共组件，这个global文件夹下的index.js就是用来将所有公共组件进行导出的 看一下my-button文件夹中的示例吧， 在my-button文件夹中只有两个文件，一个就是组件，另一个是用来将其导出的js文件， 示例my-button文件夹中的main.vue如下 <template> <div>我的按钮</.
Vue一次性简洁明了引入所有公共组件的方法
10-17
这个方法是Webpack提供的一个全局方法，它允许我们动态地构建一个上下文目录，使得我们可以根据特定的规则来引入文件。require.context() 接收三个参数：目录路径、是否包括子目录、匹配文件的正则表达式。 具体...
Vue自定义全局弹窗组件操作
10-14
在这个文件中，我们将引入Vue和我们刚刚创建的`popup.vue`组件，然后使用`Vue.component`方法注册这个组件为全局组件。代码可能如下： ```javascript import Vue from 'vue' import Popup from '@/components/popup...
详解Vue.use自定义自己的全局组件
08-30
在 Vue 框架中，使用第三方组件是非常常见的，通常我们需要安装、引入和使用组件，但有时候我们也需要自定义自己的全局组件，这篇文章将详解 Vue.use 自定义自己的全局组件。 一、 Vue.use 的作用 Vue.use 是 Vue ...
使用use注册Vue全局组件和全局指令的方法
08-27
通过`Vue.use()`，我们可以创建一个专门存放组件的插件文件，然后在主文件中导入并使用。 步骤如下： 1. 创建一个名为`plugins`的文件夹。 2. 在`plugins`文件夹内创建一个`components.js`文件。 3. 在`components...
vue中$router.back()、$router.go()的区别使用
qq_37734787的博客
10-14 2万+
使用解析1 开发中遇到返回上一页的需求，有两个方法可选： 1.$router.back() 2.$router.go() 在使用中发现，使用router.back()和router.back()和router.back()和router.go(-1)作用相同，都是返回原页面。但如果原页面路由携带参数，使用以上两个方法返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由参数仍存在。 使用解析2 go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退
Vue项目中根目录.文件配置详解（3）.eslintignore、.eslintrc.js、.stylelintrc.js、.gitignore
qq_37734787的博客
11-19 5350
.eslintignore 主要作用是忽略哪些文件的语法检查 build/.js //表示忽略build目录下类型为js的文件的语法检查 config/.js //表示忽略config目录下类型为js的文件语法检查 .eslintrc.js .gitignore 我们做的每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。比如我们项目中的npm包(node_modules)，它在我们项目中是很重要的，但是它占的内存也是很大的，所以
Vue项目中根目录.文件配置详解（1）.editorconfig、.prettierrc（代码格式化统一风格）
qq_37734787的博客
11-18 4744
https://excaliburhan.com/post/babel-preset-and-plugins.html
Vuex的index.js结构用法详解
qq_37734787的博客
09-23 4572
Vuex 主要有5大属性：modules、state、mutations、actions、getters，分别介绍 modules的作用： 主要是引入其它模块定义的Vuex，使用方法和Vuex的index.js一样，只是需要加上模块名作为路径去选择哪个模块的属性 例子 定义一个模块名称为global 的Vuex文件，也是5大属性； 第一步：引入到index.js文件中，引入方式import global from “./global”; 第二步：在index.js的modules属性中注册，注册方式modu
Vue 常用uploader组件使用，上传组件 vue-simple-uploader的引用
qq_37734787的博客
10-26 3747
推荐博客 特点 支持文件、多文件、文件夹上传 支持拖拽文件、文件夹上传 统一对待文件和文件夹，方便操作管理 可暂停、继续上传 错误处理 支持“快传”，通过文件判断服务端是否已存在从而实现“快传” 上传队列管理，支持最大并发上传 分块上传 支持进度、预估剩余时间、出错自动重试、重传等操作 安装 npm install vue-simple-uploader --save 初始化 import uploader from ‘vue-simple-uploader’ Vue.use(uploader) <t
Vue项目中根目录文件夹配置详解（4）build文件、config文件
qq_37734787的博客
11-26 3406
build（项目构建(webpack)相关代码） 其它博客介绍 build.js > 生产环境构建配置脚本 check-versions.js > 用来检查npm，node.js版本 utils.js > vue开发环境的webpack相关配置文件 vue-loader.conf.js > 配置了css加载器以及编译css之后自动添加前缀 webpack.base.conf.js > webpack 基础配置 webpack.dev.conf.js > webpack
vue中keep-alive组件、activated函数的探讨及结合使用
qq_37734787的博客
12-03 2821
详细文章 created()：在创建vue对象时，当html渲染之前就触发；但是注意，全局vue.js不强制刷新或者重启时只创建一次，也就是说，created()只会触发一次； activated()：在vue对象存活的情况下也就是缓存情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于有缓存情况下初始化页面数据等，再说下这个生命周期钩子，官网说其是在服务器端渲染期间不被调用， 说白了其就是在挂载后和更新前被调用的。但如果该组件中没有使用缓存，也就是没有被keep-alive标签
Vue项目中根目录配置详解（2）.babelrc、babel.config.js、.postcssrc.js、postcss.config.js
qq_37734787的博客
11-18 2567
ss
VUE的三种插槽slot的使用方式
qq_37734787的博客
12-22 2388
slot Props(属性)： name - string，用于命名插槽。 Usage（使用）： slot 元素作为组件模板之中的内容分发插槽。slot元素自身将被替换。 匿名插槽 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="https://cd
vuex的mutation和action的区别和使用
qq_37734787的博客
11-06 2330
mutations 类似于事件，用于提交 Vuex 中的状态 state action 和 mutations 也很类似，主要的区别在于mutations 只能是同步操作，action 可以包含异步操作，而且可以通过 action 来提交 mutations mutations 有一个固有参数 state，接收的是 Vuex 中的 state 对象 actions 也有一个固有参数 context，但是 context 是 state 的父级，包含 state、getters Vuex 的仓库是 store
package.json和package-lock.json的详细介绍和版本号介绍
qq_37734787的博客
11-25 2060
package.json 在 Node.js 中，模块是一个库或框架，也是一个 Node.js 项目。Node.js 项目遵循模块化的架构，当我们创建了一个 Node.js 项目，意味着创建了一个模块，这个模块的描述文件，被称为 package.json。 package.json 属性说明： name - 包名； version - 包的版本号； description - 包的描述； homepage - 包的官网URL； author - 包的作者，它的值是你在 https://npmjs.org
Vue自定义全局Toast与Loading组件详析
在`toast.js`文件中，引入了Vue库以及`toast.vue`组件，并创建了一个名为`Toast`的对象。这个对象包含了`showToast`状态变量，用于控制Toast的显示和隐藏。当需要显示Toast时，通过调用相关方法改变`showToast`的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值