注册全局组件(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) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比 ...
随机推荐
- ext 库及 pb_ds 在 OI 中的应用
ext 库在 OI 中的应用 写一个帖子,防止以后忘了. pb_ds 部分 pb_ds 万能头 #include<bits/extc++.h> 来包含 ext 库中所有的头文件(例如 pb ...
- ANTLR3 简介及示例
ANTLR(pronounced Antler) 是一个语言识别工具,Another Tool forLanguage Recognition 的缩写.ANTLR由旧金山大学(University o ...
- vue2-路由Router
Vue 中的路由用于实现单页应用(SPA)中的页面导航.它允许你在不刷新整个页面的情况下,根据不同的 URL 路径显示不同的组件,提供了类似于多页面应用的用户体验.例如,在一个电商应用中,可以通过 ...
- getent使用小结
转载请注明出处: getent 是一个用于访问系统数据库的命令,通常用于获取与网络有关的信息,比如用户.组.主机名.服务等.这个命令是 Linux 和 Unix 系统中非常有用的工具,可以用来查询多种 ...
- Linux中touch、mkdir与vi的区别
mkdir: 建立一个空目录 touch: 建立一个空文档,但是不进入编辑模式 vi: 建立一个空文档,进入编辑模式
- 常用js 函数
过滤对象空值 removeEmptyValues(obj) { for (const key in obj) { ...
- Java基础 —— 集合(一)
集合(一) 数组和集合的区别 数组是固定长度的数据结构,而集合是动态的数据结构 数组可以包含基本数据类型和对象,集合只能包含对象 数组只能存放同一类型的数据,而集合可以蹲房不同类型的 数组可以直接访问 ...
- 高精度计算库math.js使用踩坑记
前情 最近在做一个后端需求,需求中需要前端做一些金额数字计算,前端对于小数的计算一直都有精度问题,如0.1+0.2计算的结果并不是0.3,而是0.30000000000000004,于是引入高精度计算 ...
- day02 计算机组成
day02 计算机组成 1.硬件 计算机硬件是指一些物理装置按照系统结构的要求构成一个有机整体为计算机软件运行提供物质基础 构成最基础的硬件有: CPU 内存 主板 IO设备 2.软件 计算机软件可以 ...
- 中电金信技术实践|Redis哨兵原理及安装部署分享
导语:本文主要围绕redis Sentinel的基本概念.部署Redis Sentinel模式和其相关的API等内容进行介绍,并讲述哨兵与主从关系的区别,以及哨兵机制是怎么实现高可用的,希望可以与 ...