注册组件
- 创建组件
- 创建components文件夹
- 创建tabs和list文件夹
- 右键新建Component
- 使用组件
- 找到页面的.json文件
- 在usingComponents选项下注册组件
javascript
//1.key为当前组件在该页面中的标签名
//2.value为组件的代码路径
{
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
}
}
组件的生命周期
组件的生命周期应该被定义在lifetimes中,而方法必须要放入到methods中。
组件的生命周期一共有三个:
- created :组件实例刚刚被创建好。此时还不能调用setData
- attached: 组件完全初始化完毕、进入页面节点树后。绝大多数初始化工作可以在这个时机进行
- detached:在组件离开页面节点树后
javascript
data:{},
//组件中的方法必须定义到methods选项中
methods:{},
//组件生命周期
lifetimes:{
//组件完全初始化完毕、进入页面节点树后
attached(){
}
}
监听器
通过数据监听器:observers
javascript
data:{},
//组件中的方法必须定义到methods选项中
methods:{},
observers:{
//key:要监听的数据
//value:数据变化时,调用的函数
active:function(val){
//val变化之后的值
}
}
组件传递数据方式
- 父子关系
- 父向子传参
javascript
//子组件:通过proberties声明要从父组件中接收的数据
properties:{
tabId:String
}
//父组件:通过自定义属性的形式传递数据,以子组件中定义的key为属性名,以要传递的数据为属性值
<list tabId="{{tabSelectId}}"
- 子向父传参
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
})
}
- 兄弟关系
兄弟组件之间传参:兄弟关系===没有关系,所以想要完成兄弟之间的传参,就要为它们建立关系,找一个中间人,这个中间人一般为统一的父组件
【A兄弟组件】传递给父组件(中间人)
中间人再把数据传给【B兄弟组件】