辉太郎看前端(小程序组件封装)

前言

• 组件封装可以让我们复用代码，减少代码量。
• 我们去看看吧！

封装步骤

• 在根目录新建文件components

在文件夹下新建要定义组件的文件夹，会生成.wxml，.wxss ，.json .js文件

图片

• 在子组件的wxml中定义排版

<swiper indicator-dots='true' 
        indicator-active-color='#ff5777'
        autoplay='true'
        circular='true'
        interval='3000'
        class='swiper'>
  <block wx:for="{{images}}" wx:key="index">
    <swiper-item>
      <image class="swiper-image" src="{{item.image}}"/>
    </swiper-item>
  </block>
</swiper>

• 在子组件的js文件中的component中的properties接收数据

properties: {
    images:{
      type:Array,
      value:[]
    }
  },

• 在父组件的json中注册组件

{
  "usingComponents": {
    "w-swiper":"/component/swiper/swiper"
  },
  "navigationBarTitleText": "轮播"
}

• 在父组件的wxml中使用组件

这里用的是在子组件中接受的数据名images来传输的数据，和vue中的父传子也是有相同点的，他们接收的都是属性名。

<w-swiper images='{{使用的数据}}'></w-swiper>

总结

初出茅庐，请各位大佬多多光照。👐