微信小程序组件的使用

1.在想要使用组件的JSON文件中引用组件，注意组件名称命名规范。

{
  "usingComponents": {
    "x-playlist" : "/components/playlist/playlist"
  }
}

2.组件的属性应用

在引用组件的wxml中写上属性名称以及属性值

//属性名为playlist
<x-playlist playlist="{{item}}"></x-playlist>

在组件中接收对应的属性值。有两种写法:(value为默认值)

properties: {
      playlist:{
          type:Object,
          value:{}
      }
}

properties: {
      playlist:Object
}

属性监听器

observers对应的是一个对象。

简单属性：属性名对应函数，参数为属性值

 observers:{
       playlist(val){
            console.log(val)
        }
    },

对象属性：对象.属性两边加单引号和双括号，参数为对象.属性的值。（对象的话只需要两边加双括号）

 observers:{
        ['playlist.playCount'](count){
            console.log(count)
            console.log(this._tranNumber(count,2))
            this.setData({
                _count:this._tranNumber(count,2)
            })
        }
    },

组件中properties和data名字相同，properties覆盖data。

---

外部样式类

 有时，组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义段定义若干个外部样式类。

注意：在同一个节点上使用普通样式类和外部样式类时，两个类的优先级是未定义的，因此最好避免这种情况。

代码示例：

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
})

<!-- 组件 custom-component.wxml -->
<custom-component class="my-class">这段文本的颜色由组件外的 class 决定</custom-component>

这样，组件的使用者可以指定这个样式类对应的 class ，就像使用普通属性一样。在 2.7.1 之后，可以指定多个对应的 class 。

代码示例：

在开发者工具中预览效果

<!-- 页面的 WXML -->
<custom-component my-class="red-text" />
<custom-component my-class="large-text" />
<!-- 以下写法需要基础库版本 2.7.1 以上 -->
<custom-component my-class="red-text large-text" />

.red-text {
  color: red;
}
.large-text {
  font-size: 1.5em;
}

---

引用页面或父组件的样式

基础库 2.9.2 开始支持，低版本需做兼容处理。

即使启用了样式隔离 isolated ，组件仍然可以在局部引用组件所在页面的样式或父组件的样式。

例如，如果在页面 wxss 中定义了：

.blue-text {
  color: blue;
}

在这个组件中可以使用 ~ 来引用这个类的样式：

<view class="~blue-text"> 这段文本是蓝色的 </view>

如果在一个组件的父组件 wxss 中定义了：

.red-text {
  color: red;
}

在这个组件中可以使用 ^ 来引用这个类的样式：

<view class="^red-text"> 这段文本是红色的 </view>

也可以连续使用多个 ^ 来引用祖先组件中的样式。

注意：如果组件是比较独立、通用的组件，请优先使用外部样式类的方式，而非直接引用父组件或页面的样式。

---

获取组件实例

可在父组件里调用 this.selectComponent ，获取子组件的实例对象。

调用时需要传入一个匹配选择器 selector，如：this.selectComponent("#my-component")或者this.selectComponent(".my-component")。selector 详细语法可查看 selector 语法参考文档。

<!-- 使用自定义组件时 -->
<my-component id="the-id" />

// 父组件调用
const child = this.selectComponent('#the-id') // 等于 { myField: 'myValue' }

---

组件 wxml 的 slot

在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。

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

此时，可以在这个组件的 wxml 中使用多个 slot ，以不同的 name 来区分。

<!-- 组件模板 -->
<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>

---

组件高度满屏

height:100vh