wepy开发速查手册

wepy

发布时间 : 2018-03-11 16:25

阅读 :

事件bindtap=”click”替换为@tap=”click”,防止冒泡@tap.stop,防止捕获@tap.capture.stop，如果是@someEvent.user=”somefunction”，这种通过this.$emit(‘someEvent’),someFunction会触发而且写在父组件methods里面，同时父组件events里面的someEvent时不会执行

events示例

// events对象中所声明的函数为用于监听组件之间的通信与交互事件的事件处理函数
    events = {
        'someEvent': (p1, p2, p3, $event) => {
               console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`);
        }
    };

事件传参变更，bindtap=”click” data-index=”“更改为@tap=”click()”

repeat使用实例

<!-- 注意，使用for属性，而不是使用wx:for属性 -->
<repeat for="{{list}}" key="index" index="index" item="item">
  <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
  <child :item="item"></child>
</repeat>

computed计算属性，只要是组件中有任何数据发生了改变，那么所有计算属性就都会被重新计算，代码中可通过this.计算属性名来引用，模板中也可通过来绑定数据
1
2
3
4
5
6
7
8
9
10
data = {
a: 1
}

// 计算属性aPlus，在脚本中可通过this.aPlus来引用，在模板中可通过{{ aPlus }}来插值
computed = {
aPlus () {
return this.a + 1
}
}

watcher监听器，通过监听器watcher能够监听到任何属性的更新

data = {
  num: 1
}

// 监听器函数名必须跟需要被监听的data对象中的属性num同名，
// 其参数中的newValue为属性改变后的新值，oldValue为改变前的旧值
watch = {
  num (newValue, oldValue) {
    console.log(`num value: ${oldValue} -> ${newValue}`)
  }
}

数据绑定使用:号比如，不使用冒号是绑定字符串常量，sync不加，父组件这个变量变化就不会影响子组件，加了sync，同时，写了twoWay: true时就是双向绑定，即同一个属性（props）的变化，父修改了影响子，子修改了影响父

1	<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

props = {
    // 静态传值
    title: String,

    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },
	//这里即twoWay
    twoWayTitle: {
        type: Number,
        default: 'nothing',
        twoWay: true
    }
};

通信

父组件发起的：$broadcast（特性：所有子组件都会收到此广播事件，顺序由上至下，广度优先）

子组件发起的：$emit（特性：事件发起组件的所有祖先组件会依次接收到事件,顺序由下至上)

组件间发起的：$invoke (特性：一个页面或组件对另一个组件中的方法的直接调用)

$invoke示例(这里能否用到alias路径，大家可以试试)
1
this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');
回调均在events对象里面写

wxs

module.exports = {
  text: 'This is from wxs',
  filter: function (num) {
    return num.toFixed(2);
  }
};

// index.wpy

<template>
  <text>{{m1.text}}</text>
  <text>{{m1.filter(num)}}</text>
</template>

<script>
  import wepy from 'wepy';
  import mywxs from '../wxs/mywxs.wxs';

  export default class Index extends wepy.page {

    data = {
      num: 10
    };

    wxs = {
      m1: mywxs
    }

  };
</script>

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com