uni-app 组件注册

全局注册
uni-app 支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。
0.组件的创建
\components\pageHead.vue

<template><view><view class="">{{title}}</view><view class="">{{detail}}</view></view>
</template><script>export default {name: "pageHead",props: {title: '',detail: '',}}
</script>

1.main.js 里进行全局导入和注册

import Vue from 'vue'
import App from './App'App.mpType = 'app'// 全局注册
import pageHead from 'components/pageHead.vue'
Vue.component('pageHead', pageHead)

2.index.vue 里可直接使用组件

<template><div><pageHead :title="title" :detail="detail"></pageHead></div>
</template><script>export default {onLoad() {},data() {return {title: "hello",detail:"你好"}},}
</script>

局部注册
页面引入组件方式
1.传统vue规范：在 index.vue 页面中，通过 import 方式引入组件，在 components 选项中定义你想要使用的组件。

<template><div><pageHead :title="title" :detail="detail"></pageHead></div>
</template><script>import pageHead from '../../components/pageFooter.vue';export default {components: {pageHead},onLoad() {},data() {return {title: "hello",detail: "你好"}},}
</script>

总结步骤2步,先import 引入后components注册

2.通过uni-app的easycom：将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

举例:主要是需要符合路径规范---------最方便
\components\pageHead\pageHead.vue

<template><div><pageHead :title="title" :detail="detail"></pageHead></div>
</template><script>export default {data() {return {title: "hello",detail: "你好"}},}
</script>

easycom是自动开启的，不需要手动开启，最方便
不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。
原文出处

uni-app 组件注册相关推荐

uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
组件命名方式||局部组件注册：局部组件只能在注册他的父组件中使用
组件命名方式组件注册注意事项如果使用驼峰式命名组件,那么在使用组件的时候,只能在字符串模板中用驼峰的方式使用组件,但是在普通的标签 ...
组件化开发思想||全局组件注册语法||组件注册注意事项
组件化开发思想编程中的组件化思想体现组件化规范: Web Components 全局组件注册语法 <!DOCTYPE html> <html lang="en" ...
切换 uniapp_万能前端框架uni app初探03：底部导航开发
前言本节我们使用uni app的底部导航功能,点击不同tab会显示不同页面,这个功能在实际项目开发中几乎是必备的. 一.基础知识 1.tabBar 如果应用是一个多 tab 应用,可以通过 tabB ...
Vue.js入门教程-组件注册
一.组件创建 1.1 创建步骤创建Vue的组件都有三个基本步骤是 [①创建组件构造器.②注册组件和③使用组件]. 1.2 基本示例比如,我们创建一个Button组件. // 1. 创建一个组件构造 ...
uni app map 地图漂浮问题及方案
uni app map 地图漂浮问题及方案文章页有图片导致的问题,图片没加载出来,导致文章内容高度不固定,如果图片没加载出来,高度就是0,如果此时开始加载map,那么map就在那里加载,map原生 ...
（24）Vue.js组件—组件注册
一.Vue.js组件注册内容 • 全局注册 • 组件基础 • 局部注册二.全局注册 • 全局注册的组件在注册后可以用于任意实例或组件中. <body><div id="a ...
VUE组件注册与基础用法
这里写目录标题组件组件注册全局注册组件基础用组件注意事项局部注册 Vue 调试工具 Vue组件之间传值父组件向子组件传值子组件向父组件传值兄弟之间的传递组件插槽匿名插槽具名插槽 ...
uni app中使用图表
关于在uni app中运用图表今天写项目,需要在uni app中使用图表,我使用的是ucharts. 具体操作如下 1.下载 ucharts可以直接在uni app的插件市场下载安装. 先在插件市场 ...
uni app 自动化索引列表
uni app 自动化索引列表,官方推荐的第三方插件 https://ext.dcloud.net.cn/plugin?id=375 [{"letter": "A&quo ...

uni-app 组件注册

uni-app 组件注册相关推荐

最新文章

热门文章