注册全局组件(H5) 任意页面使用
在view下创建components文件夹。
在components下创建文件夹base.
base文件夹是用来存放 基础组件的。
比如说页面中很多处都在使用的公共组件
如你需要自定义的按钮
在components下新建index.js
用来导出你自定义的组件
这样在任意页面就可以使用组件了
index.js和base同级的
base下的search.vue组件
<template>
<div class="test">
<h1>我是一个组件</h1>
<div>我这个组件可以全局使用的</div>
</div>
</template>
<script>
export default {
data() {
return {
}
}
}
</script>
<style lang="scss" scoped>
.test {
background: pink;
padding: 10px;
text-align: center;
}
</style>
在components下新建index.js
import com from "./base/search.vue";
export default (Vue) => {
Vue.component("com", com);
};
==========
另外一种
function aa(Vue) {
Vue.component("com", com);
}
export default aa;
在main.js中挂载
import com from "./components";
Vue.use(com);
在XXX.vue直接使用
<template>
<div>
<com></com>
</div>
</template>

注册全局组件(H5) 任意页面使用的更多相关文章
- vue 中注册全局组件
1 全局注册组件 建一个 js 文件, 注册全局组件, 并且暴露出去 然后再在 main.js 中引入 在页面就可以直接使用了 2 全局注册过滤器 建立文件, 包含所有过滤器方法 ...
- vue 注册全局组件
注册全局组件有啥好处呢? 提高代码的复用性:哪里需要写哪里,贼方便,就写一个标签:减少代码量:可以再配合slot一起使用,咦~~,舒服 为了让整个项目的可读性,我创建一个文件统一存放全局组件 1.创建 ...
- vue 自动注册全局组件
vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...
- Vue 注册全局组件的方式
一.语法:Vue的实例.component("组件名称",组件) 1.方式一:这个组件就是 vue文件 import { createApp,h } from 'vue' //引入 ...
- vue 复习篇. 注册全局组件,和 组件库
初篇 ============================================================== 1. 编写loading组件(components/Loading/ ...
- VUE注册全局组件和局部组件
全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg} ...
- vue注册全局组件
在项目开发中能不能自己写一个组件可以像iview或者element那样可以不必引用就可以直接用呢?答案是可以的. 首先,写一个组件mainHeader. 接着在vue中注册这个组件,代码如下: Vue ...
- Vue3注册全局组件
1. Vue3全局组件注册 components文件夹下新建index.js文件,统一引入需要注册的组件 import CustomCheck from "./CustomCheck.vue ...
- Webpack+vue2.0如何注册全局组件 (01)
Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...
- Vue自动化注册全局组件脚本
今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js写 Vue.component(name, instance) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比 ...
随机推荐
- [ATCoder] Cyclic GCDs - 神圣的数学题
Cyclic GCDs 题面 [题目描述] 给定一个长为 \(N\) 的序列 \(a_1,a_2,\dots,a_N\). 设一个置换 \(p\) 的价值 \(f(p)\) 为每个轮换中最小的 \(a ...
- Personal Wiki
What is a PersonalWiki? It's like WardsWiki, but it's yours. It can be: a free-form database a Perso ...
- 命令行应用开发初学者指南:脚手架篇、UI 库和交互工具
在日常的前端开发工作中,我们经常依赖各种命令行工具来提高效率和代码质量.例如,create-react-app 和 eslint 等工具不仅简化了项目的初始化过程,还能自动执行代码检查和格式化任务.当 ...
- 在window 使用 docker 安装redis 踩坑记
1. 安装REDIS 在安装的时候,使用 docker pull redis 就可以了. 但是 实际上 发现镜像居然拉不下来. 修改了一下 docker 镜像. 配置如下: "registr ...
- springboot 参数注解 注入参数
什么时注解参数 说明 我们在 使用spring mvc 的时候会使用这样的注解 @ResponseBody 这样,spring mvc 会将 客户端传来的数据,自动构建成 相应类型的对象. 有些情况下 ...
- 开源 - Ideal库 - Excel帮助类,ExcelHelper实现(四)
书接上回,前面章节已经实现Excel帮助类的第一步TableHeper的对象集合与DataTable相互转换功能,今天实现进入其第二步的核心功能ExcelHelper实现. 01.接口设计 下面我们根 ...
- 解决node报错ERR_OSSL_EVP_UNSUPPORTED
"scripts": {//修改启动dev方式 "dev": "SET NODE_OPTIONS=--openssl-legacy-provider ...
- Arrays Basics
`#include ; using namespace std; int main() { int A[5];//数组的声明 int B[5] = { 2,4,6,8,10 };//数组的声明和初始化 ...
- PpcProcessResult
@Data @Accessors(chain = true) public class PpcProcessResult { public static volatile int globalThre ...
- Qt音视频开发42-人脸识别客户端
一.前言 人脸识别客户端程序,不需要和人脸识别相关的库在一起,而是通过协议通信来和人脸识别服务端通信交互,人脸识别客户端和服务端程序框架,主要是为了提供一套通用的框架,按照定好的协议,实现人脸识别的相 ...