wepy框架组件创建使用

首先我们应该在src文件下创建一个components的文件夹，来放置我们开发过程中使用的组件文件；

例如:

<script>
  import wepy from 'wepy';
  export default class ListItem extends wepy.component {
    props = {
        
    }
    data = {};

    onLoad() { };

    onShow() { };
  }
</script>

我们可以看到，我们需要声明一下：export defalut class ListItem extends wepy.component 方式来声明我们地区是一个组件；

然后在父组件中：通过import引入，然后在当前页面用components = {},声明：如下图所示；

import ListItem from '../components/list'
  export default class Index extends wepy.page {
    config = {
      navigationBarTitleText: 'test'
    }
    data = {
      items: [1, 2, 3, 4],
      parentTitle: 'p-title'
    }
    onLoad() {
      console.log('onLoad')
    }
    components = {
      child: ListItem
    }
  }

 在父组件中使用子组件 <child :items="items"></child>

子组件通过props接受：

export default class ListItem extends wepy.component {
    props = {
      title: String,
      items: Array
    }
    data = {};

    onLoad() { };

    onShow() { };
  }

在wepy中提供了新的循环渲染的标签<repeat>

<repeat for="{{items}}" key="index" index="index" item="item">
    {{item}}
  </repeat>

结果就是：