wepy学习基础指令

{{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

• 父组件

• A组件