- setData绑定数据的变更:
setData({msg1:”wepy”}) <==> this.msg1=”mywepy”;
需注意的是,在异步函数中更新数据的时候,必须手动调用$apply方法,才会触发脏数据检查流程的运行。如:
setTimeout(() => {
this.title = ‘this is title’;
this.$apply();
},
4、计算属性computed
在data中这种变量male值为false
在computed中计算 male1和male2的值
在view中显示
{{male}}:{{male1}}:{{male2}}
结果为:
5、监控属性watch
监控data中某个数据变化时,触发事件
例如:
data = {
msg1: ‘wepy’,
person1: {
name: ‘张三’,
age: ‘18’
},
male: false
};
监控person1信息变化:
watch={
person1(newValue,oldValue){
this.person1.name=“李四”
console.log(newValue,oldValue);
}
};
结果显示
注意:能用computed尽量不用watch,防止破坏数据初始完整性
6、自定义属性和自定义函数(不能使用与视图,普通自定义方法不能放在methods对象中)
在data和methods平行节点下
onLoad() {
console.log(‘onLoad’);
this.showMyData();
};
//自定义属性
myData = ‘我是自定义属性’;
// 自定义函数
showMyData() {
console.log(this.myData);
}
7、自定义组件
-
src目录下创建components文件夹
-
components下创建自定义组件页面xxx.wpy,继承wepy.component
注意:类名保持一致
- 在script节点下引入自定义组件
import MyHeader from ‘…/components/MyHeader’;
import MyFooter from ‘…/components/MyFooter’;
- Export default节点下声明自定义组件
components = {
MyHeader,
MyFooter
};
- 使用自定义组件
8、增加页面
在app.wpy配置页面config配置中
pages: [‘pages/index2’,‘pages/index’],
9、props传值
- 静态传值
静态传值为父组件向子组件传递常量数据,因此只能传递String字符串类型。
模拟数据(声明数据msg1)
data = {
msg1: ‘父组件的数据’
};
传递数据
注意:":"不能省略
接收数据
在子组件export default中声明接收
props = {
msg1: String
};
使用数据
{{msg1}}
- 动态传值,单向绑定
使用sync,只需要在父组件传递数据时添加sync即可实现,子组件的数据随着父组件变化而变化
- 动态传值双向绑定
使用sync 和twoWay,只需要在父组件传递数据时添加sync即可实现,子组件添加twoWay:true
父组件
子组件
props = {
msg1: {
type:String,
twoWay:true
}
};
10、父子通信$broadcast(实现父事件对子事件的调用)
- 创建子组件Cat、Dog
{{msg}}
- 父组件调用
<view @tap=“myTap”>{{msg}}
主要使用的是父组件$broadcast,和子组件events
11、子组件向父组件通信$emit
- 创建子组件SonA、SonB
<view
class=“myHeader”
@tap=“aTap”
点击SonA
- 父组件调用
{{msg}}
子组件使用$emit进行触发父组件的事件,父组件使用events进行接收(自定义事件和&emit结合使用父组件不用再使用events进行接收,直接执行自定义事件
)
12、平行组件之间的通信$invoke
- 父组件