在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. 107. 二叉树的层序遍历 II Golang实现

    题目描述: 给你二叉树的根节点 root ,返回其节点值 自底向上的层序遍历 . (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 输入:root = [3,9,20,null,null,1 ...

  2. 2020-2024 Rider安装+激活

    一.下载 1. rider各版本官方下载入口 rider官网下载地址 2. 选择左边,然后点击[20xx.x.x-Windows(exe)] PS: 如需下载特定版本,可以往下拉,都是选择[202x. ...

  3. computed methods watch filters

    computed(计算属性) 计算属性该属性里面的方法必须要有return返回值,这个返回值就是(value值). 有几个关键点 1) 计算后属性不需要在data中重复定义 2) 计算后属性必须渲染后 ...

  4. importlib 用法

    首先看一下importlib.import_module(name, package=None)函数的参数 函数调用存在两种方式: 1.绝对导入,name为完整路径str,package为None. ...

  5. golang配置读取值viper

    viper简介 Viper是Go应用程序的完整配置解决方案,包括12-Factor应用程序.它旨在在应用程序中工作,并且可以处理所有类型的配置需求和格式.它支持: 设置默认值 从JSON.TOML.Y ...

  6. Zcmu-1178

    思路: 分析题目要求的就是由2,3,5,7单独相乘或者组合相乘的数字. 所以将数字循环起来相乘,之后结果按从大到小地无重复放进数组当中. 学长 #include<set> #include ...

  7. manim边做边学--文字的创建与销毁

    本篇开始介绍Manim中的动画模块,动画模块是整个框架的核心魅力所在. Manim不仅提供了可以直接实现各种各样动画效果的对象, 还提供了设置动画的时长.延迟时间以及运动速率等参数,可以据此发挥自己的 ...

  8. Net5学习笔记

    IOC 容器IServiceCollection 什么是Ioc 把对象的统一创建交给第三方容器来创建 如何使用内置IOC ServerCollection 1.在Starup中的ConfigurSer ...

  9. idea配置gradle国内镜像源

    项目文件中找到build.gradle文件,修改其中的buildscript和allprojects地址: buildscript { repositories { maven{ url 'http: ...

  10. X64\X86\X86-64的区别

    x86是指intel的开发的一种32位指令集,从386开始时代开始的,一直沿用至今,是一种cisc指令集,所有intel早期的cpu,amd早期的cpu都支持这种指令集,ntel官方文档里面称为&qu ...