小程序——component在page中的应用和数据传递及外部样式控制

pages的页面使用components的组件

1、在components写好组件c-test
2、在要使用组件页面的.json文件命名组件名字，输入组件路径
3、在要使用组件页面的.wxml文件调用组件
json文件，命名+路径

{
  "usingComponents": {
    "c-test":"/components/c-test/c-test"
  }
}

wxml文件，调用

<!--index.wxml-->
<c-test/>

pages的页面数据传递到components的组件

1、先写好组件c-test

<view class="test">
  <image src="/assets/image/testImage.jpg" mode="aspectFill"/>
  <text>xiaoming</text>
</view>

2、写好页面的js文件的数据，在json中引用组件，在wxml调用组件
.js文件

data: {
    testItems:[{
      id:1,
      imageSrc:"/assets/image/testImage.jpg",
      imageName:"xiaoming"
    },
      {
        id: 2,
        imageSrc: "/assets/image/testImage2.jpg",
        imageName: "xiaohua"
      },
      {
        id: 3,
        imageSrc: "/assets/image/testImage3.jpg",
        imageName: "lianzi"
      },
      {
        id: 4,
        imageSrc: "/assets/image/testImage4.jpg",
        imageName: "zixuan"
      },
      {
        id: 5,
        imageSrc: "/assets/image/testImage5.jpg",
        imageName: "xiaofang"
      },
      {
        id: 6,
        imageSrc: "/assets/image/testImage6.jpg",
        imageName: "huanzi"
      }
      ]

  }

.json文件

{
  "usingComponents": {
    "c-test": "/components/c-test/c-test"
  },
  "navigationBarTitleText": "组件-页面的数据传递"
}

.wxml文件

<view class="testItem">
  <block wx:for="{{testItems}}" wx:key="id">
    <c-test/>
  </block>
</view>

结果是这样的

3、修改页面的wxml，将testItems数组的item命名为testItems传递到组件中testItems="{{item}}"

<view class="testItem">
  <block wx:for="{{testItems}}" wx:key="id">
    <!-- <c-test/> -->
    <c-test testItems="{{item}}"/>
  </block>
</view>

4、在组件的c-test.js文件申明一下传递过来的数据的类型 testItems:Object

Component({
  properties: {
    testItems:Object
  }
})

5、在组件的c-test.wxml文件中调用数据

<view class="test">
  <!-- <image src="/assets/image/testImage.jpg" mode="aspectFill"/>
  <text>xiaoming</text> -->
  <image src="{{testItems.imageSrc}}" mode="aspectFill"/>
  <text>{{testItems.imageName}}</text>
</view>

最后效果：

page页面控制组件的样式

1、在组件页面js文件定义外部样式类externalClasses

/* 组件 segmentPane.js */
Component({
  externalClasses: ['segment_class'],
  properties: { /**   **/  }, 
  data: { /**   **/ }
  }）

2、在组件页面wxml文件决定设置的类的位置

<!-- 组件 segmentPane.wxml -->
<view class="segmentContainer segment_class"></view>

3、在外部使用组件的样式类

<!-- 页面的 WXML -->
<segmentPane segmentItems="{{segmentItem}}" segment_class="segmentPage"/>

.segmentPage{
  width: 600rpx;
  height: 800rpx;
  background: cyan
}