注册全局组件(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) 然后很命令式,写着也不好看,想着能够有一个函数可以指定加载比 ...
随机推荐
- 鸿蒙NEXT开发案例:随机密码生成
[引言] 本案例将实现一个随机密码生成器.用户可以自定义密码的长度以及包含的字符类型(大写字母.小写字母.数字.特殊字符),最后通过点击按钮生成密码,并提供一键复制功能. [环境准备] •操作系统:W ...
- git rebase -i的时候用的不是 vi 编辑器是 nano编辑器不会用
今天给同事 rebase 代码 发现 git fetch && git rebase -i origin/develop 的时候 出现了 那个 nano 编辑器的界面 不会用,和vim ...
- Docker Registry之删除镜像、垃圾回收
Docker仓库在2.1版本中支持了删除镜像的API,但这个删除操作只会删除镜像元数据,不会删除层数据.在2.4版本中对这一问题进行了解决,增加了一个垃圾回收命令,删除未被引用的层数据.本文对这一特性 ...
- dotnet学习笔记-专题06-过滤器和中间件-01
1. 基本概念 在ASP.NET Core中,中间件和过滤器都是处理HTTP请求的重要组件,但它们在应用中的位置.作用范围以及使用方式有所不同. 1.1 中间件和过滤器的区别 1.1.1 中间件 位置 ...
- JVM学习笔记-操作数栈(Operand Stack)
Like the local variables, the operand stack is organized as an array of words. But unlike the local ...
- JDBC中驱动加载的过程分析
江苏 无锡 缪小东 本篇从java.sql.Driver接口.java.sql.DriveManager类以及其它开源数据库的驱动类讨论JDBC中驱动加载的全过程以及JDBC的Framework如何做 ...
- 看不懂来打我,Vue3的watch是如何实现监听的?
前言 watch这个API大家都很熟悉,今天这篇文章欧阳来带你搞清楚Vue3的watch是如何实现对响应式数据进行监听的.注:本文使用的Vue版本为3.5.13. 关注公众号:[前端欧阳],给自己一个 ...
- JS之Class类
转载:https://juejin.cn/post/7098891689955164168 ECMAScript 6 提供了更接近传统语言的写法,新引入的class关键字具有正式定义类的能力.类(cl ...
- Nuxt.js 应用中的 afterResponse 事件钩子
title: Nuxt.js 应用中的 afterResponse 事件钩子 date: 2024/12/6 updated: 2024/12/6 author: cmdragon excerpt: ...
- angr-ctf
angr 的项目地址 https://github.com/jakespringer/angr_ctf angr实战 00 拖到IDA 就是输入正确的指令才能通关 这次试一下用angr来解题 goah ...