uni-app注册全局组件

有一些组件可能会被很多个页面使用到，比如说，自定义的导航栏，如果在每一个页面都引用一次就很麻烦了，这个时候可以将该组件注册为全局组件了

有两种方法可以注册为全局组件

第一种是 easycom组件模式

官方描述：https://uniapp.dcloud.io/collocation/pages?id=easycom

1. 将组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。可以不用引用、注册，直接在页面中使用。

2. pages.json中要设置autoscan为true

{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}}],"globalStyle": {"autoscan":true}
}

3. 然后就可以直接在页面中使用了

第二种就是传统的安装、引用、注册，三个步骤

1. 新建 .vue 文件，可以放在自定义文件夹下，我这里新建了一个global.vue

2. 在 main.js 中引用、注册

import global from "@/components/global.vue"Vue.component('global', global)

3. 在需要组件的地方直接使用即可

<template><view class="content"><global></global></view>
</template>

uni-app注册全局组件相关推荐

uni-app注册全局组件 - 符合easycom
通知本文已过时,HBuilderX已发布新的自定义组件方法:uni_modules 本文的/components/xx/xx.vue会在新版uni-app中与原生ui组件冲突. 新方法详见: [we ...
使用uniapp注册全局组件
首先我们要在全局注册全局组件创建一个组件后在main.js文件下当然注册组件首先要新建一个组件目录然后引入. //注册全局组件 //首先在文件下创建一个组件 import global fr ...
uni app 自定义头部组件（2）局部右侧按钮
上一篇为完全的自定义头部链接:https://blog.csdn.net/qq_37403179/article/details/102955419 本片则是使用uniapp已有的自定义方法给头部添 ...
VUE3@clli组件样式、全局组件、配置打包
组件样式: <style scoped lang="less"> 注册全局组件 import {createApp} from 'vue' const app = c ...
三、Vue组件化开发学习笔记——组件化的基本步骤、全局组件和局部组件、父组件和子组件、注册组件的语法糖、模板分离写法、组件的数据存放
一.什么是组件化? 人面对复杂问题的处理方式: 任何一个人处理信息的逻辑能力都是有限的所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容. 但是,我们人有一种天生的能力,就是将问题 ...
微信小程序全局组件注册使用
1.创建 component 全局组件 showToast 2.注册全局组件在app.json中设置usingComponents "usingComponents": {&qu ...
Vue3（撩课学院）笔记02-创建组件，全局组件，局部组件，父子组件，组件标签化，组件的data数据共享，组件间通讯，props，父传子$ref，子传父$parent
1.创建一个组件首先要创建一个根组件进行挂载再创建一个子组件,完成子组件的逻辑子组件主要使用template模板来完成布局和逻辑把子组件通过根组件.component的方法挂载到根组件上 &l ...
vue 组件全局组件和局部组件component
1.全局组件 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title ...
vue脚手架的安装、生命周期、文件导入格式、局部组件和全局组件、动态添加属性和方法、插槽、传值
----------------------------------- DOS命令进入dos: win+r 切换盘符: d: 查看: dir 打开文件夹: cd 文件夹的名字返回上一级目录 ...

uni-app注册全局组件

uni-app注册全局组件相关推荐

最新文章

热门文章