小程序之自定义组件笔记

官方文档戳这里：文档

一、单个与多个slot的使用方法

1.单个使用

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!-- 引用组件的页面模版 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

2.多个使用

slot默认使用单个，若要使用多个，要先声明：

//Component.js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  }
})

使用name属性来区分slot

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

引用页面用slot属性来选择要注入的slot

<!-- 引用组件的页面模版 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

笔记：

• 页面模板view里面的内容会直接替换组件slot标签里的内容，而不是叠加。
• 一般是用于非组件逻辑的代码块的注入，不用于数据注入。

二、组件样式

1.不能使用的选择器

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

2.：host指定组件默认样式

/* 组件 custom-component.wxss */
:host {
  color: yellow;
}

笔记:

• 使用不被允许的选择器会报错哦。
• 组件内的样式完全独立，不继承全局样式（app.wxss）以及页面样式。所以有用到字体图标需要重新引用。

三、属性、数据、方法构造器

1.组件通用属性与方法

通用属性

属性名	类型	描述
is	String	组件的文件路径
id	String	节点id
dataset	String	节点dataset
data	Object	组件数据，包括内部数据和属性值

通用方法

setData

/* setData */
this.setData({
  //需要设置的data
});

hasBehavior

/* hasBehavior */
//检查组件是否具有 behavior （检查时会递归检查被直接或间接引入的所有behavior）

triggerEvent

选项值	默认值	描述
bubbles	false	事件是否冒泡
composed	false	事件是否可以穿越组件边界，为false时，事件将只能在引用组件的节点树上触发，不进入其他任何组件内部
capturePhase	false	事件是否拥有捕获阶段

//参数依次为事件名、参数、选项值
this.triggerEvent(action,{},{});
//funName 为组件的触发动作名字，在页面里这样绑定
<component-tag-name bind:action="fun"></component-tag-name>

createSelectorQuery

//大致写法
var query = this.createSelectotQuery();
query.("#id||.class").scrollOffset(function(res){
     //获取到的节点信息
});

query有关的文档戳这：文档

selectComponent&selectAllComponents

//使用选择器选择组件实例节点，返回匹配到的第一个组件实例对象
//使用选择器选择组件实例节点，返回匹配到的全部组件实例对象组成的数组

getRelationNodes

//获取所有这个关系对应的所有关联节点(父节点、子节点)

构造器

Component({

  behaviors: [],

  properties: {
    //通常用于接受页面出传过来的值，页面如下
    //<component-tag-name myProperty:"aaa"></component-tag-name>
    //可用setData改变值
    myProperty: { 
      type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function(newVal, oldVal){} // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
    },
    myProperty2: String // 简化的定义方式
  },
  data: {}, // 私有数据，可用于模版渲染
  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function(){
  //组件生命周期函数，在组件实例进入页面节点树时执行
  },
  moved: function(){
  // 组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
  },
  detached: function(){
  //组件生命周期函数，在组件实例被从页面节点树移除时执行
  },

  methods: {
    //组件的自定义方法写在这里
    onMyButtonTap: function(){
      this.setData({
      })
    }
  }

})