微信小程序中组件的使用
微信小程序中组件的使用:
微信小程序中组件定义在项目根目录下components文件夹下,在页面使用的时候需要在页面的json文件中声明,如
父组件向子组件传值及子组件向父组件传值:
父组件wxml中:通过属性绑定值的方式向子组件传值,通过自定义事件接收子传递过来的值
<!-- 父组件向子组件传值:和vue或uni-app相同,title='连接WiFi' -->
<header title='连接WiFi' bindEmitheadClick='bindEmitheadClickHandle'></header>
子组件wxml中: 通过{{}}方式显示父组件中接收到的值,用事件触发triggerEvent方法向父组件传值
<!-- 通过headClickHandle函数触发triggerEvent向父组件发送消息 -->
<view class='header' bindtap='headClickHandle'>{{title}}</view>
子组件js:通过properties接收父组件传过来的值,通过triggerEvent向父组件发送消息,类似emit()
// 组件使用Component声明
Component({// properties:用来接收父组件传递的内容,类似vue中propsproperties: {title: {type: String,value: '默认标题'}},data: {},// 组件中的方法可以定义在methods中methods: {headClickHandle () {console.log('子组件点击了')// 子组件向父组件传值:triggerEvent,类似vue或uni-app中的this.emit()this.triggerEvent('EmitheadClick', {name:'jack',age:18})}},// 微信小程序组件中的生命周期函数可以直接写在Component中的一级对象中,还可以写在lifetimes中的节点下,这种方式是推荐的lifetimes: {// created 组件首次创建时触发,进入每个使用该组件的页面后只加载一次created () {console.log('组件被创建了')},// ready 组件试图加载完后执行,也是只只执行一次ready () {console.log('ready')},// moved 组件位置发生改变时触发moved () {console.log('moved')},// 组件进入页面时触发,只触发一次attached () {console.log('attached')}},// 组件被页面移出时触发detached () {console.log('组件被卸载了')},// error 组件抛出异常是触发error () {console.log('error')}
})
提示:本文图片等素材来源于网络,若有侵权,请发邮件至邮箱:810665436@qq.com联系笔者删除。
笔者:苦海
微信小程序中组件的使用相关推荐
- 微信小程序 - 自定义组件中类似页面 onShow 的页面显示就触发的生命周期钩子函数(页面回退时更新数据常用, 例如回退页面更新子组件数据, 回退更新子组件中 data 内容)
前言 在微信小程序中,用户回退页面触发更新数据的操作,一般都是在 页面 onShow() 中写上执行更新的函数即可. 但如果咱们把数据和方法都写在了自定义子组件中,那么用户回退页面时, 更新数据就成了 ...
- html img 手势缩放,微信小程序中利用image组件实现图片手势缩放
微信小程序中利用image组件实现图片手势缩放,前端大神严灏的牛文,讲解了微信小程序中image组件的三种是缩放模式,三种之中,只有 aspectFit 模式可以等比例缩放图片,并显示完整的图片. 原 ...
- 微信小程序中的页面文件和组件
页面文件 页面构造器 JS文件 页面的JS文件,用于书写当前页面所需要的脚本代码以及生命周期函数. Page() : 注册了一个页面 接收一个对象,该对象用于配置当前页面所需内容. 该对象拥有的属性: ...
- 微信小程序中自定义组件
文章目录 小程序项目 app.json pages/index/index.wxml pages/index/index.wxss pages/index/index.js 自定义组件 compone ...
- 微信小程序中使用vant组件库(超详细)
目录 前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
- 五分钟学会在微信小程序中使用 vantUI 组件库
前言 我们在开发微信小程序时,设计和实现好用的用户界面无疑是至关重要的一步.但是微信小程序官方自带的 UI 组件库无法满足很多使用场景,这个时候就需要我们使用一些第三方的 UI 组件库.而 vant ...
- PhP加载时显示动画,在微信小程序中如何使用loading组件显示载入动画
这篇文章主要介绍了微信小程序loading组件显示载入动画用法,结合实例形式分析了loading组件显示载入动画的相关事件操作与属性设置技巧,并附带源码供读者下载参考,需要的朋友可以参考下 本文实例讲 ...
- 微信小程序中使用vant weapp 的dialog组件
微信小程序中使用vant weapp 的dialog组件 官方文档路径:import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog';,这不是 ...
- 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
最新文章
- 这八个步骤,Python让你轻松爬取B站弹幕,网友看了都说6
- Java的知识点24——多线程技术理论——程序、进程、线程
- sqlserver 分页_四类数据库分页实现方案总结之PG分页实现
- 如何正确地生成一个随机数
- sharepoint服务器安装已安装netframework4.5,仍提示未安装
- php curl加密获取数据,PHP利用Curl模拟登录并获取数据例子
- android平台开发的安装
- Spring框架最终注解标签注入方法
- 【数学】【筛素数】Miller-Rabin素性测试 学习笔记
- Python输入一个年份输出全年日历
- 苏宁易购首页仿写代码-仅供参考# 话不多说,直接上代码,苏宁易购手机app网站首页,仅供参考
- 百分六用计算机该怎么算,24975000的百分之五是多少,用计算器怎么算?
- 计算机硬盘 打开很慢,电脑硬盘运行速度慢如何解决 电脑硬盘运行速度慢解决方法【介绍】...
- IxEngine开发笔记
- Excel单元格内插入图片(VBA创建函数,根据图片名称批量插入)
- 幻读和不可重复读的区别
- java 中的finally你知多少_「JAVA」详述Java异常体系,处理异常时配上finally效果更佳...
- Swagger注解详解
- 条码软件如何制作矢量格式的条码文件
- Google---机器学习速成课程(二)-SGD
热门文章
- hnust 好友互动标识
- 谷歌浏览器切换黑色背景
- 华中科技大学辅修计算机双学位,关于做好“七校联合办学”辅修专业、双学位的通知...
- 微信小程序 nodejs+vue+uniapp付费自习室图书馆教室座位系统-
- 手机屏保密码忘记了怎么解开
- android 仿钉钉日历,仿钉钉左右滑动日历
- [NOI2015] 寿司晚宴(状压DP)
- Notion AI vs ChatGPT vs New Bing 三款AI软件使用体验对比
- android reset无命令,wiping_手机出现wiping data无命令然后就关不了机了
- 黑马Uni-App视频笔记(上) 基础部分(含视频素材下载地址)