微信开发文档地址：https://developers.weixin.qq.com ... figuration/app.html
教学地址
组件
<!--pages/list/watch/watch.wxml-->
<text>监听组件</text>
<view style="height: 10px;background-color: aqua;"></view>
<view class="msgBox">
<view><text>{{lable}}</text></view>
<view>
<text>总人数：{{connt}}</text>
</view>
<text>名字:{{user.name}}</text>
<text>--年龄:{{user.age}}</text>
</view>
<view>
<button type="primary" bind:tap="changeMsg">更新数据</button>
</view>
// pages/list/watch/watch.js
Component({
/**
* 组件的属性列表
*/
properties: {
lable: String
},
/**
* 组件的初始数据
*/
data: {
connt: 30,
user: {
name: '李哥',
age: 18
}
},
/**
* 组件的方法列表
*/
methods: {
changeMsg() {
this.data.connt++
this.setData({
connt: this.data.connt + 1,
//类似vue框架的ref响应式双向绑定，不这么写引用值不咋更新
// "user.age": this.data.user.age + 1
lable: "学生信息"
})
// console.log(this.data.connt);
}
},
observers: {
//监听数据以及属性是否发生变化
connt: (newV) => {
console.log(newV, '数量数据更新拉');
},
"user.age": (newV) => {
console.log(newV, '年龄数据更新拉');
},
"user.**": (newV) => {
console.log(newV, '年龄数据更新拉');
},
"lable": (newV) => {
console.log(newV, '人物信息名称更新了');
},
}
})
/* pages/list/watch/watch.wxss */
.msgBox {
display: block;
margin: 10px;
line-height: 25px;
letter-spacing: 2px;
}
调用
<view>
<leftListall></leftListall>
<isAllowdUser lable="我已经统一用户协议 和 隐私协议"></isAllowdUser>
<isAllowdUser lable="匿名提交"></isAllowdUser>
</view>
<view>
<watch lable="人物信息"></watch>
</view>
|
