微信小程序 父子组件
组件引用
全局引用
在app.json
中引用则该组件为全局组件,供每个页面调用该组件
页面或组件引用
在对应页面或者组件的json
文件种添加
页面布局
index/index.wxml
<view>index</view>
<parent></parent>
parent/index.wxml
<view>parent</view>
<child></child>
child/index.wxml
<view>child</view>
组件通讯
父组件向子组件传值
child/index.js
子组件定义属性
Component({
properties: {
like: {
type: String,
value: "默认值"
}
},
})
child/index.wxml
子组件展示该属性
<view>properties.like:{{like}}</view>
效果
parent/index.wxml
父组件传值
<child like="打游戏"></child>
效果
父组件调用子组件方法
child/index.js
给子组件添加方法
Component({
properties: {
like: {
type: String,
value: "默认值"
}
},
methods: {
doLikeThings() {
console.log(`去${this.properties.like}`);
}
}
})
parent/index.wxml
添加一个id为music的组件
<child like="听音乐" id="music"></child>
parent/index.js
注: 当parent为页面时,应为 wx.selectComponent
当组件生命周期执行到了ready时调用选择id为music的组件,调用组件的doLikeThings方法
Component({
lifetimes: {
ready() {
this.selectComponent("#music").doLikeThings();
}
},
})
效果
子组件回调父组件方法
child/index.js
在子组件加载成功后向父组件发送事件
lifetimes:{
ready(){
this.triggerEvent("loaded", this.properties)
}
}
parent/index.js
在父组件写一个方法接受该事件
methods: {
childLoadedCallBack(e) {
console.log(e);
}
}
parent/index.wxml
进行关联绑定
<child like="写代码" bind:loaded="childLoadedCallBack"></child>
效果