乐趣区

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

jiezi

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

1. 创立自定义组件

相似于页面，一个自定义组件由json wxml wxss js 4 个文件组成

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