简介小程序自定义组件

自定义Component

styleIsolation

当咱们在使用组件的页面编写自定义组件的样式无效时，咱们能够使用styleIsolation属性的shared值

Page({
    options: {
     styleIsolation: 'shared'
    },
})
复制代码

组件样式的限制

1. 组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器，请改用class选择器。
2. 组件和引用组件的页面中使用后代选择器（.a .b）在一些极端状况下会有非预期的表现，如遇，请避免使用。
3. 子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其余组件可能致使非预期的状况。
4. 继承样式，如 font 、 color ，会从组件外继承到组件内。
5. 除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。

#a { } /* 在组件中不能使用 */
[a] { } /* 在组件中不能使用 */
button { } /* 在组件中不能使用 */
.a > .b { } /* 除非 .a 是 view 组件节点，不然不必定会生效 */
复制代码

externalClasses

自定义组件中怎么使用外部样式

Page({
  externalClasses: ['tag-class'],
})
复制代码

wxml文件

<view class="tag-class"></view>
复制代码

page页面

<v-tag tag-class="custom-class"></v-tag>
复制代码

page页面的wxss

.custom-class {
  color:red
}
复制代码

slot插槽

若是要使用具名slot，必须设置multipleSlots为true

Component({
  
  options: {
     multipleSlots: false, // 设置slot
  },
})
复制代码

wxml文件

<view>
    <text></text>
    <slot name="number"></slot>
</view>
复制代码

Behavior

behaviors是用于组件间代码共享的特性,

每一个 behavior 能够包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。 每一个组件能够引用多个 behavior ，behavior 也能够引用其它 Behavior

// behavior.js
module.exports = Behavior({
    behaviors: [],
    properties: {
      count: {
        type: Number
      }
    },
    methods: {
        getCount: function() {
            console.log(this.count)
        }
    }
})
复制代码

组件中使用

const commonBehavior = require("../behavior.js");
Component({
    ...
    behaviors: [commonBehavior],
    ...
})
复制代码

wxml文件

// v-tag组件中使用
<view>
  <text bindtap = "getCount">总数：{{ count }}</text>
  <slot></slot>
</view>

复制代码

triggerEvent

触发自定义事件，相似emit wxml文件

// page页面
<v-tag bindmyevent="handleMyEvent">
</v-tag>
复制代码

handleEvent(detail) {
   console.log(detail)
 }
复制代码

组件的js文件

// 自动触发myevent事件
   this.triggerEvent('myevent', {data: 233})
复制代码

wxss文件中使用background-image无效

在wxss中是没法引用本地包文件中存放的图片的

background-image只支持线上图片和base64图片

// 方案一，使用网络图片
<view class="banner-img"></view>
.banner-img {
  height: 200rpx;
  width: 100%;
  background-size: cover;
  background-image: url(https://test-pulick.oss-cn-beijing.aliyuncs.com/data/1508923002430.png);
}

// 方案二，使用base64,
// 方案三，使用style属性
<view style="background-image: url(../../images/bg1.png);width: 200rpx;height: 200rpx;"></view>

// 方案四，使用image标签，设置z-index属性

复制代码