关于javascript:微信小程序基础开发六自定义组件

(一)简略应用组件的三个步骤

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:组件生命周期函数，在组件实例被从页面节点树移除时执行