微信小程序基础开发(六)----自定义组件

(一)简单使用组件的三个步骤

1.创建自定义组件

类似于页面，一个自定义组件由json wxml wxss js4个文件组成

2.声明自定义的组件

在所需要用到组件的页面的json文件中进行声明

{
  "usingComponents": {
    "Tabs":"../../components/Tabs/Tabs"
  }
}

3.使用组件

在页面中当作普通标签使用即可

---

(二)组件的样式优化与标题激活选中

//tabs.wxml
<view class="tabs">
    <view class="tabs_tittle">
        <view 
        wx:for="{{tabs}}"
        wx:key="id"
        class="title_item {{item.isActive?'active':''}}"
        >
            {{item.name}}
        </view>
    </view>
    <view class="tabs_content">内容</view>
</view>

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        name:"首页",
        isActive:true
      },
      {
        id:1,
        name:"原创",
        isActive:false
      },
      {
        id:2,
        name:"分类",
        isActive:false
      },
      {
        id:3,
        name:"关于",
        isActive:false
      },
    ]

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

标题激活选中

<view class="tabs">
    <view class="tabs_tittle">
        <view 
        wx:for="{{tabs}}"
        wx:key="id"
        class="title_item {{item.isActive?'active':''}}"
        bindtap="handleItemTap"
        data-index="{{index}}"
        >
            {{item.name}}
        </view>
    </view>
    <view class="tabs_content">内容</view>
</view>

 //tabs.js
  methods: {
    handleItemTap(e) {
      /*
      1、绑定点击事件   在methods中绑定
      2、获取被点击的索引
      3、获取原数组
      4、对数组循环
      */
      //获取索引
      const { index } = e.currentTarget.dataset;
      //获取data中的数组
      //等价于let tabs=this.data.tabs;
      let { tabs } = this.data;
      //循环数组
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);

      this.setData({
             tabs
      })
    }
  }

---

(三)父向子传递数据

父组件的wxml

<!-- 
   demo.wxml

    父组件页面向子组件传递数据是通过标签属性的方式
    1、在子组件进行接收
    2、把这个数据当成data中的数据直接使用
 -->
<Tabs aaa="123"></Tabs>

子组件的js

 //Tabs.js
 // 里面存放的是要从父组件接收的数据
  properties: {
    // 要接收的数据的名称
    aaa:{
      // type  要接收的数据的类型
     type:String,
    //  value 默认值
    value:""
    }
  },

子组件的wxml

<view>
    {{aaa}}
</view>

---

(四)子向父传递数据

触发父组件中的自定义事件，同时传递数据给父组件

this.triggerEvent{"父组件自定义事件的名称",要传递的参数}

---

(五)slot

slot标签其实就是一个占位符，插槽，当父组件调用子组件的时候，再传递标签过来，最终这些被传递的标签会替代slot插槽的位置

<Tabs>
    <block wx:if="{{tabs[0].isActive}}">0</block>
    <block wx:elif="{{tabs[1].isActive}}">1</block>
    <block wx:elif="{{tabs[2].isActive}}">2</block>
    <block wx:elif="{{tabs[3].isActive}}">3</block>
</Tabs>

---

(六)组件的其它属性

• properties:组件的对外属性，是属性名到属性设置的映射表
• data:组件的内部数据，和properties一同用于组件的模板渲染
• observers:组件数据字段监听器，用于监听properties和data的变化
• methods:组件的方法，包括事件响应函数和任意的自定义方法
• created:组件生命周期函数，在组件实例刚刚被创建时执行注意此时不能调用setData
• attached:组件生命周期函数，在组件实例进入页面节点树时执行
• ready:组件生命周期函数，在组件布局完成后执行
• moved:组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
• detached:组件生命周期函数，在组件实例被从页面节点树移除时执行