小程序组件拆分父传子

Posted 2021-07-08 fengshaopu

第一先在父组件中定义数据或者图片，轮播等等、

<swiper>
  <swiper-item>
    <image src="//scpic2.chinaz.net/Files/pic/pic9/202104/bpic23090_s.jpg"></image>
  </swiper-item>
</swiper>

二、设置一个组件状态
把这个拆出去首先要在json里面设置组件为true

  "compoents":"true",

三、在创建文件，拆出来的文件 同级

四、把第二步骤那个删了
五、把拆出来的内容放里面

<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true">
  <swiper-item wx:for="{{list}}">
  <image src="{{item}}" alt="" />
  </swiper-item>
</swiper>
/* autoplay	boolean	false	否	是否自动切换

indicator-dots	boolean	false	否	是否显示面板指示点

interval	number	5000	否	自动切换时间间隔 */

六、父组件注册使用

在json里面
 "usingComponents": {
    "w-swirpt":"/commpoents/sww/swirpt"
  }

2.使用：标签就好

<w-swirpt></w-swirpt>

七、父传子
在父组件的js中定义一个数组什么的。存数据
然后在标签上父传子

<w-swirpt list="{{arr}}"></w-swirpt>

八、接收
父传子用props接收
在子组件里面的js里面用properties接收

 properties: {
    list:{
      type:Array,
    }
  }
**```
**九、使用****

```css
<!--commpoents/sww/swirpt.wxml-->
<text>commpoents/sww/swirpt.wxml</text>

<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true">
  <swiper-item wx:for="{{list}}">
  <image src="{{item}}" alt="" />
  </swiper-item>
</swiper>

完事。。。。。。。。。。。。。。。。。。。。。。。。。。