微信小程序自定义组件、父子组件相互调用传值
2021-01-15 本文已影响0人
xxxixxxx
获取更多小程序相关文章
1.创建 header 组件
1.1 选中文件夹,右键新建 Component。 暂命名为 header
1.2 header.js 文件配置组件属性与方法
交互关键方法⚠️ this.triggerEvent('subClickEvent', '来自 子组件 的信号这个是 参数')
Component({
//组件的属性列表
properties: {
/// 属性名 简化写法
name: String,
/// 属性名
car: {
type: String,
value: ''
}
},
// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
lifetimes: {
attached: function () { },
moved: function () { },
detached: function () { },
},
// 组件所在页面的生命周期函数
pageLifetimes: {
show: function () { },
hide: function () { },
resize: function () { },
},
// 组件的初始数据
data: {
color: '彩色'
},
// 组件的方法列表
methods: {
logP() {
console.log('pppppp');
},
// 组件内部先调用该方法 再调用父方法
cllParentClick() {
// 触发 subClickEvent 事件, 间接通知在 父组件中 subClickEvent 绑定的 subClick 方法
// 建议 subClickEvent 与 subClick 命名相同,这个刚接触感觉会有一点混乱
// subClickEvent 就是通知名。subClickEvent 这个通知在使用该组件时绑定的,绑定了父组件的 subClick 方法。然后在这里触发了 subClickEvent 通知
this.triggerEvent('subClickEvent', '来自 子组件 的信号这个是 参数')
},
btnClick(e) {
console.log('开车开车');
},
/// 私有方法 下划线开头
_saySelfName() {
console.log('header');
}
}
})
1.3 header.wxml
header 组件内容
<view class="header">
<text>name:{{name}} car:{{car}}</text>
<button size="default" type="primary" bind:tap="btnClick">开车开车</button>
<button size="default" type="primary" bind:tap="cllParentClick">调用父组件 subClick 方法</button>
</view>
header.wxss
.header {
background-color: red;
}
2. 使用 header 组件
2.1 page.json
{
"usingComponents": {
"header": "../../../components/header/header"
}
}
2.2 page.wxml
<header id='comHeader' name='朱小明' car='自行车' bind:subClickEvent='subClick'></header>
<button bind:tap="getHeaderInfo">获取组件属性</button>
在这里注册的 subClickEvent 事件,当 header 组件触发 subClickEvent 时,调用 page 的 subClick 方法。 建议将 subClickEvent 与 subClick 命名相同
2.3 page.js
Page({
// header 组件间接调用该方法
subClick(e) {
console.log(e.detail);
},
// 主动获取 header 组件实例对象
getHeaderInfo() {
/// 获取组件实例对象 记得加 #
let header = this.selectComponent('#comHeader');
/// 获取属性
console.log(header.properties.color);
/// 调用方法
header.logP();
},
})