微信小程序

注册组件

  • 创建组件
    1. 创建components文件夹
    2. 创建tabs和list文件夹
    3. 右键新建Component
  • 使用组件
    1. 找到页面的.json文件
    2. 在usingComponents选项下注册组件
javascript 复制代码
//1.key为当前组件在该页面中的标签名
//2.value为组件的代码路径
{
  "usingComponents": {
    "navigation-bar": "/components/navigation-bar/navigation-bar"
  }
}

组件的生命周期

组件的生命周期应该被定义在lifetimes中,而方法必须要放入到methods中。

组件的生命周期一共有三个:

  1. created :组件实例刚刚被创建好。此时还不能调用setData
  2. attached: 组件完全初始化完毕、进入页面节点树后。绝大多数初始化工作可以在这个时机进行
  3. detached:在组件离开页面节点树后
javascript 复制代码
data:{},
//组件中的方法必须定义到methods选项中
methods:{},
//组件生命周期
lifetimes:{
//组件完全初始化完毕、进入页面节点树后
	attached(){
	}
}

监听器

通过数据监听器:observers

javascript 复制代码
data:{},
//组件中的方法必须定义到methods选项中
methods:{},
observers:{
	//key:要监听的数据
	//value:数据变化时,调用的函数 
	active:function(val){
		//val变化之后的值 
		
	}
}

组件传递数据方式

  1. 父子关系
    1. 父向子传参
javascript 复制代码
//子组件:通过proberties声明要从父组件中接收的数据
properties:{
	tabId:String
}
//父组件:通过自定义属性的形式传递数据,以子组件中定义的key为属性名,以要传递的数据为属性值 
<list tabId="{{tabSelectId}}"
  1. 子向父传参
javascript 复制代码
//子组件:通过triggerEvent方法发送一个通知,通知父组件接收数据。
//方法的第一个参数为:通知名
//方法的第二个参数为:要传递的数据
this.triggerEnent('change',{
	id
})
//父组件:通过bind监听子组件中发送的通知
//bind后的内存为子组件发送的通知名,表达式为接收到该通知时所触发的方法
<tabs bind:change="onTabChange"></tabs>
//方法触发后可以通过e.detail的形式获取子组件传递过来的数据对象
onTabChange(e){
	const {id} = e.detail;
	this.setData({
		tabSelectId:id
	})
}
  1. 兄弟关系
    兄弟组件之间传参:兄弟关系===没有关系,所以想要完成兄弟之间的传参,就要为它们建立关系,找一个中间人,这个中间人一般为统一的父组件
    【A兄弟组件】传递给父组件(中间人)
    中间人再把数据传给【B兄弟组件】
相关推荐
上趣工作室43 分钟前
微信小程序开发1------微信小程序中的消息提示框总结
微信小程序·小程序
三天不学习2 小时前
微信小程序蓝牙连接打印机打印单据完整Demo【蓝牙小票打印】
微信小程序·小程序·蓝牙打印
韩仔搭建3 小时前
美乐迪电玩大厅加载机制与 RoomList 配置结构分析
游戏·小程序·开源·lua
WKK_5 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
老李不敲代码1 天前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa1 天前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
二J1 天前
管理100个小程序-很难吗
android·小程序
qq_357389631 天前
陪诊陪检系统源码,陪诊小程序,陪诊APP,陪诊服务,家政上门系统,居家护理陪护源码,医护小程序
小程序
橘猫云计算机设计2 天前
springboot-基于Web企业短信息发送系统(源码+lw+部署文档+讲解),源码可白嫖!
java·前端·数据库·spring boot·后端·小程序·毕业设计
跨时代科技2 天前
洗车小程序系统前端uniapp 后台thinkphp
小程序