在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) 任意页面使用的更多相关文章

  1. vue 中注册全局组件

    1  全局注册组件 建一个 js 文件, 注册全局组件, 并且暴露出去 然后再在 main.js  中引入       在页面就可以直接使用了    2 全局注册过滤器 建立文件, 包含所有过滤器方法 ...

  2. vue 注册全局组件

    注册全局组件有啥好处呢? 提高代码的复用性:哪里需要写哪里,贼方便,就写一个标签:减少代码量:可以再配合slot一起使用,咦~~,舒服 为了让整个项目的可读性,我创建一个文件统一存放全局组件 1.创建 ...

  3. vue 自动注册全局组件

    vue 自动注册全局组件 vue 注册全局组件的方式 const plugins = { install(Vue) { const requireComponent = require.context ...

  4. Vue 注册全局组件的方式

    一.语法:Vue的实例.component("组件名称",组件) 1.方式一:这个组件就是 vue文件 import { createApp,h } from 'vue' //引入 ...

  5. vue 复习篇. 注册全局组件,和 组件库

    初篇 ============================================================== 1. 编写loading组件(components/Loading/ ...

  6. VUE注册全局组件和局部组件

    全局组件 第一步:在components文件夹下建立一个子文件Users.vue <template> <div class="users"> {{msg} ...

  7. vue注册全局组件

    在项目开发中能不能自己写一个组件可以像iview或者element那样可以不必引用就可以直接用呢?答案是可以的. 首先,写一个组件mainHeader. 接着在vue中注册这个组件,代码如下: Vue ...

  8. Vue3注册全局组件

    1. Vue3全局组件注册 components文件夹下新建index.js文件,统一引入需要注册的组件 import CustomCheck from "./CustomCheck.vue ...

  9. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  10. Vue自动化注册全局组件脚本

    今天有一个idea,vue一些组件,可能会全局都用到,我觉得在main.js写 Vue.component(name, instance) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比 ...

随机推荐

  1. javascript正则获取a标签的href

    js正则获取a标签的href let str = '<a href="https://www.test.com" >test</a>' let reg = ...

  2. nano编辑器保存退出

    nano的编辑器保存推出 使用 ctrl x 然后提示Y N 是否保存 写入,输入Y即可 然后再Enter 确认就可以了

  3. ElementUI ---- dialog点击取消后蒙遮层不消失

    场景: 页面A打开了 dialog, 然后点击 页面A dialog 的按钮 跳转到 页面B,并且打开页面B的 dialog 但是页面B的 dialog 关闭后,蒙遮层并没消失(已经设置了 :appe ...

  4. element ui Tree树形控件获取未全选父节点和子节点id

    Tree树形控件选中状态 在做分配权限的时候如图选择了父节点的某些子节点,现在父节点是半选中状态,使用this.$refs.tree.getCheckedKeys()只能拿到当前的子节点,子节点全选才 ...

  5. python SQLAlchemy 查询慢sql

    1.config文件添加如下配置 FLASKY_DB_QUERY_TIMEOUT = 0.1 # 设置sql执行超时时间 0.1s SQLALCHEMY_RECORD_QUERIES = True # ...

  6. kafka之介绍

    Kafka 由于高吞吐量.可持久化.分布式.支持流数据处理等特性而被广泛应用.但当前关于Kafka原理及应用的相关资料较少,在我打算编写本文时,还没有见到中文版本的Kafka相关书籍,对于初学者甚至是 ...

  7. apisix~路由前缀的正则匹配

    参考:https://apisix.apache.org/zh/docs/apisix/FAQ/ 在你提供的 Apache APISIX 路由配置中,vars 字段用于定义一些变量匹配规则.具体来说, ...

  8. Sealos Devbox 基础教程:使用 Cursor 从零开发一个完整的项目

    作者:熊猫Jay,上市公司技术负责人,破局AI 提示词.AI编程教练.通往AGI之路内容共创者 最近发现身边越来越多人尝试用 Cursor 写代码.开发小产品了. 如果想要实现商业化或引流,我们的小工 ...

  9. Python开发一个Instant Messaging(IM)(即时通讯)聊天工具:从理论到实践

    一.引言 在现代社会中,即时通讯工具已经成为人们日常沟通的重要工具.开发一个IM聊天工具不仅能够提高我们的编程技能,还能让我们更好地理解即时通讯系统的原理.本文将详细介绍如何开发一个简单的IM聊天工具 ...

  10. 推荐一款强大的开源物联网 Web 组态软件

    前言 快速发展的物联网(IoT)领域,设备管理和监控的需求日益增长.为了满足这一需求并提供更高效的解决方案. 向大家推荐一款强大的开源物联网Web组态软件.这款软件不仅具备灵活的可视化配置功能,还提供 ...