Wepy使用记录—使用组件

在wepy中可已使用原生小程序自定义组件，也可已使用wepy组件，使用上稍有区别。

1.使用原生方式的自定义组件

这里引用的是vant小程序组件（这里不用纠结第三方还是自定义，因为这种组件库都是按照小程序自定义组件标准去写的），用vant不用iview原因是，iview编译有报错看着不舒服，但是不影响使用。
微信小程序笔记（四）Wepy使用记录—使用组件
因为引用的是自定义标题栏，所以会看着不太明显。所以这里对界面简单的修改了一下。

该界面具体代码如下：

<style lang="stylus">
  @import "../css/base.styl"

  page
    width match_parent
    height match_parent

  .topBar
    background-color theme-color
  .topBar .titleGroup
    background-color theme-color
  .topBar .title
    color white

  .center
    display flex
    width match_parent
    height match_parent
    justify-content center
    align-items center
    background-color #3f71ed
    color white
    font-weight bold
    font-size size(50)

</style>

<template>
  <view class="topBar" style="padding-top: {{statusBarHeight}}rpx">
    <van-nav-bar title="测试页" custom-class="titleGroup" title-class="title"/>
  </view>

  <view class="center">
      使用小程序原生组件
  </view>
</template>

<script>
  import wepy from 'wepy';
  export default class Index extends wepy.page {
    config = {
      navigationStyle: 'custom',
      navigationBarTextStyle: 'white',
      usingComponents: {
        'van-nav-bar': '../component/vant/nav-bar/index'
      }
    };
    data = {
      statusBarHeight : 0
    };
    onLoad() {
      wx.getSystemInfo({ success: e => this.statusBarHeight = e.statusBarHeight});
    }
  }
</script>

base.styl样式文件中的代码如下：

theme-color = #6caac1
match_parent = 100%

size(value){
  return unit(value,rpx)
}

2.使用wepy组件

wepy组件的创建和引用还是非常简单的。首先先创建一个组件如：test.wpy。代码如下：

<template>
    <view>自定义wepy组件</view>
</template>
<script>
  import wepy from 'wepy';

  export default class Test extends wepy.component {
    props = {};
    data = {};
    methods = {};
  }
</script>

<style lang="stylus">

</style>

这样就定义完一个组件。随后在要使用这个组件的界面中去进行配置。（图中“key相当于组件的id”请参考wepy官方文档组件说明）
微信小程序笔记（四）Wepy使用记录—使用组件
使用组件时，直接将components对象中的key当标签使用即可。

运行效果如下图：

3.使用wepy属性传值——传值

属性传值使用props，其实使用起来跟原生小程序组件属性传值差别不大（跟vue的props传值相比，说实话只是长的很像而已）。接下来修改下test组件，还是看图比较直观。
微信小程序笔记（四）Wepy使用记录—使用组件
回到index.wpy中，设置属性值。其实这里这样写<test :text="testText"/>和<test text="属性传值"/>这样写没啥缺别，因为都是设死的。

4.使用wepy属性传值——动态修改属性值

为什么说<test :text="testText"/>和<test text="属性传值"/>这两种写法没有区别。因为当testText变量发生改变后，界面不会刷新。接下来修改下index.wpy界面，在界面中添加一个按钮，当点击按钮后修改testText变量的值。代码截图如下所示：
微信小程序笔记（四）Wepy使用记录—使用组件
耳听为虚眼见为实，下图完美的展示了之前所描述的问题。

其实这并不是什么问题，只需要在属性后面加上.sync就可以了。也就是这个样子<test :text.sync="testText"/>（官方文档都有说明，只不过就是没有效果，都得自己实验一下才能理解）。微信小程序笔记（四）Wepy使用记录—使用组件

5.使用wepy组件通信——父向子传值

父组件向子组件传值目前有两种方式：$broadcast和$invoke。（组件通信与交互官方文档说明）

$broadcast

简单点说就是群发。只不过是给当前父组件中每个子组件发。方正就是发了，接不接就看子组件的需求了。这里为了看效果先改写一下test组件。
微信小程序笔记（四）Wepy使用记录—使用组件
然后再到index界面里修改一下。再添加一个test组件，在点击按钮的时候发起传参的事件。代码截图如下所示：

运行效果如下所示：