一、基础组件 组件是视图层的基本组成单元,一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。 所有组件与属性名都是小写,单词之间以连字符-连接,根节点为<template>,其下只能有一个根组件。 框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。 常见的基础...
首先我们打开官方文档:https://uniapp.dcloud.net.cn/component/#easycom 在UniApp 的组件当中,有一个 easycom 的组件规范,只要你遵循了这个规范,就可以进行自定义组件 那么遵循了这个规范又有什么好处呢? 传统vue 组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom 将其精简为一步 只要组件安装在项目...
在uni-app 项目中,我们可以通过HBuilder 开发者工具新建一个后缀名为 .vue 的文件,在这个 .vue 文件中创建自定义组件。 后面将该组件通过 import 的方式导入,再在 components 中进行注册就可以像基础组件一样使用了。 2.1创建一个自定义组件。 打开HBuilder 开发者工具,之前创建过的项目会自动打开。在前面小节中...
在需要引入自定义组件的 页面中,通过 import 方式引入组件 (导入),在 components 选项中注册你想要使用的组件(引用),在页面中使用自定义组件名称标签(使用) 因为注册组件的时候定义组件名的方法有两种,所以使用组件名时也有两种方式,如下图解释: 第二种:通过uni-app的easycom规则 easycom规则*将组件引入精简为一...
uniapp中:每个页面可以理解为一个单页面组件,这些单页面组件注册在pages.json里,在组件关系中可以看作父组件。 自定义可复用的组件,其结构与单页面组件类似,通常在需要的页面引入或者注册到全局main.js中使用,这是子组件。 1、props (props用于父组件给子组件传递参数,参数可以限制类型,可以设置默认值) ...
打开官方文档:组件使用的入门教程 | uni-app官网 (dcloud.net.cn) 在官方文档当中有一个组件,点击组件按钮进入组件页面 可以看到在左侧的菜单中,有非常多的分类不同类型对应不同场景的组件 这些组件大家都不需要记,就和之前 Vue, 微信小程序, 饿了么UI一样,用到谁,直接回到文档中查询一下即可 ...
示例在mine页面中使用(直接使用即可,无需导入和注册): <template><view><my-componet></my-componet></view></template>exportdefault{data() {return{ } },methods: { } } AI代码助手复制代码 展示效果: 读到这里,这篇“uni-app组件的基本使用方法是什么”文章已经介绍完毕,想要掌握这篇文章的知识点还需要...
在uniapp 项目下是基于 vue 框架来写页面的,因此可以使用 vue 的相关知识点来新建公共组件。 在刚刚的目录结构下面,有一个components文件夹,里面就是存放相关的全局公共组件。 我们就以全局公共图标组件为例展示一下,可以采用{作者名称}-${组件名称}命名文件夹,{作者名称}-${组件名称}.vue来命名组件。
一、创建全局组件 首先,我们需要创建一个组件。在UniApp项目中,组件通常放在components目录下。假设我们创建一个名为global-component的全局组件。 在components目录下创建global-component文件夹,并在该文件夹中创建global-component.vue文件,用于编写组件的模板、脚本和样式。 二、注册全局组件 为了让组件在全局范围内可用...