一般我们在定义了一个组件之后,为了复用,需要将它导出以提供给其他页面使用。

组件导出的关键字是

exprot default

没有加default时,例如:

export class Template{}

当然,你可以在单个js文件里声明多个组件,例如Templates.js

export class Template{}
export class AnotherTemplate{}

这样在其他文件引用时,需要使用{}符号且组件名称必修和class名称一样,像这样子:

import {Template,AnotherTemplate} from './components/Templates';

而加default时,例如:

export default class Template{}

然后在其他文件引用,像这样子:

import Template from './components/Templates';

你也可以为这个组件另起一个别名,像这样子:

import TheTemplate from './components/Templates';

但是每个文件里只能有个default组件,可以包含其他非default组件:

export default class Template{}
export class AnotherTemplate{}

然后引用的时候,如下:

import Template,{AnotherTemplate} from './components/Templates';

总结

  • 有default和没有default的区别在于:有default在引用时可以自定义名称,而没有default时需要使用{}括起来且名称必修和class名称一致
  • 每个文件里只能有一个default组件,但可以有多个非default组件

微信小程序之自定义组件与使用的更多相关文章

  1. 微信小程序之自定义组件的应用

    小程序支持自定义组件,下面是一个简单的购物车组件,实现的效果如图: 效果图 创建组件 在根目录创建components目录,然后创建计数组件 count 如图: 组件内容 <!--compone ...

  2. 微信小程序之自定义组件

    在微信小程序项目中 肯定会存在很多功能和样式上相似的部分 面对这种情况 只是单单的ctrl+c ctrl+v 就显得很low了,而且也不便于后期维护那么这时候 使用微信小程序中的自定义组件功能就很合适 ...

  3. 微信小程序:自定义组件

    为什么要学习自定义组件? 1.用上我自己的单词abc,我希望在页面中展示椭圆形的图片, 2.打开手机淘宝,假如现在要做一个企业级项目,里面有很多页面,首页存在导航模块,点击天猫,进入第二个页面,而第二 ...

  4. 微信小程序覆盖自定义组件样式

    小程序官方文档明确指出,引入的第三方自定义组件,是不可以对其进行CSS样式覆盖的,但是我们还想要修改怎么办呢?自定义组件时会之定义个外部类,通过这个外部类来修改样式. 修改https://weapp. ...

  5. 微信小程序:自定义组件的数据传递

    一.前言 如果小程序中有可复用的UI且具有一定的功能性,就可以使用自定义组件将其封装起来.下面介绍一个简单的组件和一个复杂的组件. 二.简单的组件(计数器) 1. 组件功能介绍 这个组件常见于外卖软件 ...

  6. 微信小程序开发---自定义组件

    开发者可以将页面内的功能模块抽象成自定义组件,以便在不同的页面中重复使用:也可以将复杂的页面拆分成多个低耦合的模块,有助于代码维护.自定义组件在使用时与基础组件非常相似. 创建自定义组件 类似于页面, ...

  7. 微信小程序里自定义组件,canvas组件没有效果

    methods: { /** * el:画圆的元素 * r:圆的半径 * w:圆的宽度 * 功能:画背景 */ drawCircleBg: function (el, r, w) { const ct ...

  8. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  9. 【小程序】小程序开发自定义组件的步骤>>>>>>>>>小程序开发过程中报错:jsEnginScriptError

    报错:jsEnginScriptError VM6342: jsEnginScriptError Component is not found in path "component/spac ...

随机推荐

  1. 升级webapi依赖的Newtonsoft.json的版本(转)

    随着微软日渐重视开源社区的贡献,微软在自己的产品中往往也会集成开源的第三方库. 比如System.Net.Http.Foramatting.dll 就依赖于Newtonsoft.json v4.5. ...

  2. 九度OJ 1043:Day of Week(星期几) (日期计算)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:5349 解决:1923 题目描述: We now use the Gregorian style of dating in Russia. ...

  3. 九度OJ 1025:最大报销额 (01背包、DP)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4352 解决:1055 题目描述:     现有一笔经费可以报销一定额度的发票.允许报销的发票类型包括买图书(A类).文具(B类).差旅(C ...

  4. Go 语言中的数组是一种 值类型(不像 C/C++ 中是指向首元素的指针)

    the-way-to-go_ZH_CN/07.1.md at master · Unknwon/the-way-to-go_ZH_CN https://github.com/Unknwon/the-w ...

  5. python cookbook第三版学习笔记三:列表以及字符串

    过滤序列元素: 有一个序列,想从其中过滤出想要的元素.最常用的办法就是列表过滤:比如下面的形式:这个表达式的意义是从1000个随机数中选出大于400的数据 test=[] for i in range ...

  6. python获取当前的时间

    打印出当前的年月日时分秒 print(time.strftime('%Y-%m-%d %H:%M:%S',time.localtime(time.time()))) 2018-09-05 09:39: ...

  7. JAVA使用相对路径读取配置文件

    JAVA使用相对路径读取配置文件[align=center][/align][size=medium][/size]   在软件开发中经常遇到读取配置文件,以及文件定位问题.今天做个总结.   (一) ...

  8. vuex原理笔记

    本文总结自: https://tech.meituan.com/vuex-code-analysis.html, 将要点提炼为笔记,以便不时之需,安不忘危. 核心可分为两部分: 1.vue.use(V ...

  9. 《CSS权威指南(第三版)》---第六章 文本属性

    本章主要的内容是: 1.文本缩进: text-indent.行内元素无法缩进,一般用左内边距或外边距来创造这种效果. 2.文本对齐:text-align .只应用于块状元素. 3.行高:一般line- ...

  10. mysql从删库到跑了

    常用的数据库有哪些? oralce,sqlserver,mysql,db2 有钱就用oracle吧 oracle和mysql的区别:https://zhidao.baidu.com/question/ ...