小程序组件的使用及注意

一、创建组件

1、新建组件文件
在components文件夹下新建目录select，创建select下拉选项卡组件
2、自定义组件样式及js
①select.wxml文件
	继承样式，如 font 、 color ，会从组件外继承到组件内。
	除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。
	#a { } /* 在组件中不能使用 */
	[a] { } /* 在组件中不能使用 */
	button { } /* 在组件中不能使用 */
	.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */
③selece.js
Component({  
  /*组件配置选项*/
  options: {
    addGlobalClass: true,//这个选项等价于设置 styleIsolation: apply-shared
    styleIsolation: 'isolated'
    /*
    isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）*/
  },
  // 组件的属性列表   
  properties: {
    // 页面传入组件的数据
    propArray: {
      type: Array,
    },
    nowText: {
      type: null,
    }
  },
  // 组件的初始数据
  data: {
    selectShow: false, //初始option不显示
  
  },
  //监听字段语法
  observers: {
    'some.subfield': function(subfield) {
      // 使用 setData 设置 this.data.some.subfield 时触发
      // （除此以外，使用 setData 设置 this.data.some 也会触发）
      subfield === this.data.some.subfield
    },
    'arr[12]': function(arr12) {
      // 使用 setData 设置 this.data.arr[12] 时触发
      // （除此以外，使用 setData 设置 this.data.arr 也会触发）
      arr12 === this.data.arr[12]
    },
  }
  // 组件声明周期
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      this.setData({
        firstText: this.properties.nowText,//将获取到的初始值存储起来
      });
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 组件的方法列表
  /*组建间通信
 1. 事件：用于子组件向父组件传递数据，可以传递任意数据。
2.父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。

	*/
  methods: {
 // 1. 以事件的形式向父组件 传值
   onTap: function(){
      this.triggerEvent('customevent', {}) //同vue 组件间传值时一致的
    }
  }
})

二、使用组件

1、引入组件
在使用组件页面的json文件中配置
"usingComponents": {
    "select": "/components/select/select"
}
tips: 注意路径是否正确， / 单斜杠表示根目录，是绝对路径。

2、页面使用组件
<view class="top">
  <select prop-array='{{timeArray}}' now-text='{{invetime}}'></select>
  <select prop-array='{{termArray}}' now-text='{{term}}'></select>
  <select prop-array='{{moneybackArray}}' now-text='{{moneyback}}'></select>
</view>
tips: prop-array为自定义的属性名，和组件所在的 js 中properties中的属性是对应的。

        在  properties 定义的属性中，属性名采用驼峰写法（例如：propArray）。

        在引入组件的 wxml 中，指定属性值时则对应使用连字符写法（例如：prop-array=”…”)。

3、传入组件所需数据
在引用组件页面的.js文件中的data中传入数据
data: {
    invetime: '投资时间',
    term: '标的期限',
    moneyback: '是否回款',
    timeArray: [{
      "id": "0",
      "text": "全部"
    }, {
      "id": "1",
      "text": "3个月内"
    }, {
      "id": "2",
      "text": "6个月内"
    }, {
      "id": "3",
      "text": "12个月内"
    }]
 }