小程序基础(三) - 自定义组件

自定义组件

类似vue或者react中的自定义组件

1 创建自定义组件

类似于页面, 一个自定义组件由json, wxml, wxss, js 四个文件组成

1. 在微信开发者工具中快速创建组建的文件结构, 在文件夹内components/Tabs,创建组件名为为Tabs

声明组件

⾸先需要在组件的 json ⽂件中进⾏⾃定义组件声明 — myHeader.json

{
   
  "component": true
}

编辑组件

同时，还要在组件的 wxml ⽂件中编写组件模板，在 wxss ⽂件中加⼊组件样式 ; slot 表⽰插槽，类似vue中的slot — myHeader.wxml

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
 {
  {innerText}}
    <slot></slot>
</view>

在组件的 wxss ⽂件中编写样式 — myHeader.wxss
注意：在组件wxss中不应使用ID选择器、属性选择器和标签名选择器.

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

注册组件

在组件的 js ⽂件中，需要使⽤ Component() 来注册组件，并提供组件的属性定义、内部数据和⾃定义⽅法 — myHeader.js

Component({
   
  properties: {
   
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
   
      // 期望要的数据是 string类型
      type: String,
      value: 'default value',
   }
 },
  data: {
   
    // 这里是一些组件内部数据
    someData: {
   }
 },
  methods: