Props是page和组件，组件和组件之间传递数据的媒介，不仅是数据，还可以是自定义事件（方法）。

静态值

静态值可以看做是一个常量，固定不变的值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- component -->
<text>{{title}}</text>
<script>
import wepy from 'wepy';
export default class Com extends wepy.component {
  props = {
    title: String
  };
  data = {}
}
</script>

<!-- page -->
<view>
  <com title="常量值" />
</view>
<script>
import wepy from 'wepy';
import Com from 'components/com';  // 引入com组件
export default class Index extends wepy.page {
  components = {
    com: Com
  };
}
</script>

动态值

Props传递动态值时通过使用 :propsName （类似Vue中的v-bind:propsName）来绑定动态的数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!-- component -->
<text>{{title}}</text>
<script>
import wepy from 'wepy';
export default class ComA extends wepy.component {
  props = {
    title: String
  };
  data = {}
}
</script>

<!-- page -->
<view>
  <comA :title="getTitle" />
</view>
<script>
import wepy from 'wepy';
import ComA from 'components/coma';  // 引入com组件
export default class Index extends wepy.page {
  components = {
    comA: ComA
  };
  data = {};
  computed = {
    getTitle() {
      return '变化的值';
    }
  }
}
</script>

Props双向数据绑定

在传递的时候加上 sync 修饰，并在子组件的props里面设置 twoWay: true。
看栗子：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!-- component -->
<text @tap="changeTitle">{{title}}</text>
<script>
import wepy from 'wepy';
export default class ComA extends wepy.component {
  props = {
    title: {
      type: String,
      twoWay: true
    }
  };
  data = {};
  methods = {
    changeTitle() {
      this.title = '来自组件的修改后的title';
      this.$apply();
    }
  };
}
</script>

<!-- page -->
<view>
  <text>{{title}}</text>
  <comA :title.sync="title" />
</view>
<script>
import wepy from 'wepy';
import ComA from 'components/coma';  // 引入com组件
export default class Index extends wepy.page {
  components = {
    comA: ComA
  };
  data = {
    title: '来自父级的title'
  };
}
</script>

值得注意 props传递动态值是要在前面用 : 号；如果是循环遍历组件，这个时候用的是 repeat 标签，而该标签内不支持 props 双向绑定这样的操作。

自定义事件

自定义事件是在methods里面声明的，在要使用的地方通过@.propsName.user=”customEvent”来向子组件进行事件传递。然后组件则通过$emit**来处理该事件。

  • @为修饰符，指事件；
  • propsName为向子组件传递的自定义事件名称，相当于给自定义事件取个别名，并在子组件中使用该别名；
  • user为后缀，表示这是个自定义事件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!-- page -->
<view>
  <text>{{text}}</text>
  <comA @get.user="getText" />
</view>

<script>
import wepy from 'wepy';
import ComA from 'components/coma';
export default class Index extends wepy.page {
  data = {
    text: '初始内容'
  };

  methods = {
    getText(txt) {
      this.text = txt;
      this.$apply();
    }
  };
}
</script>

<!-- comA -->
<view @tap="change">comA</view>

<script>
  methods = {
    change() {
      this.$emit('get', '来自comA的问候');  // get是在子组件上定义的自定义方法名称，对应的是父组件的 getText 方法
    }
  }
</script>