【微信小程序】自定义组件的使用+传值

黑马视频学习笔记

一、创建自定义组件

1.创建组件的文件结构

在文件夹内 components/myHeader ，创建组件名为 myHeader
在这里插入图片描述
组件和页面结构基本一样（包含四个部分）

2.声明组件

在组件的json文件``中进行自定义组件声明

{
  "component": true,
  "usingComponents": {}
}

3.编辑组件

在组件的Tabs.wxml文件中编写组件模板，在Tabs.wxss中加入组件样式

<!-- Tabs.wxml -->
<view class="tabs">
  <view class="tabs_title">
    <!-- <view class="title_item active">首页</view>
    <view class="title_item">原创</view>
    <view class="title_item">分类</view>
    <view class="title_item">关于</view> -->

    <view 
    wx:for="{{tabs}}"
    wx:key="id"
    class="title_item {{item.isActive?'active':''}}"
    bindtap="hanldeItemTap"
    data-index="{{index}}"
    >
    {{item.name}}
  </view>
  </view>
  <view class="tabs_content">
    <!-- 
      slot 标签 其实就是一个占位符 插槽
      等到 父组件调用 子组件的时候 再传递 标签过来 最终 这些被传递的标签
      就会替换 slot 插槽的位置 
     -->
    <slot></slot>
  </view>
</view>

/* Tabs.wxss */

.tabs{}
.tabs_title{
  display: flex;
  padding: 10rpx 0;
}
.title_item{
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color:red;
  border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

4.注册组件

在组件的Tabs.js文件中，用Component()注册组件，并提供组件的属性定义、内部数据和自定义方法

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

  /**
   * 组件的初始数据
   */
  data: {
    // tabs
  },
  /* 
  1 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
  2 组件.js 文件中 存放事件回调函数的时候 必须要存在在 methods中！！！
   */
 

  methods: {
    hanldeItemTap(e){
      /* 
      1 绑定点击事件  需要在methods中绑定
      2 获取被点击的索引 
      3 获取原数组 
      4 对数组循环
        1 给每一个循环性 选中属性 改为 false
        2 给 当前的索引的 项 添加激活选中效果就可以了！！！

       
       5 点击事件触发的时候 
          触发父组件中的自定义事件 同时传递数据给  父组件  
          this.triggerEvent("父组件自定义事件的名称",要传递的参数)
       */

      //  2 获取索引
      const {index}=e.currentTarget.dataset;
      // 5 触发父组件中的自定义事件 同时传递数据给  
      this.triggerEvent("itemChange",{index});
      // 3 获取data中的数组
      // 解构  对 复杂类型进行结构的时候 复制了一份 变量的引用而已
      // 最严谨的做法 重新拷贝一份 数组，再对这个数组的备份进行处理，
      // let tabs=JSON.parse(JSON.stringify(this.data.tabs));
      // 不要直接修改 this.data.数据 
      // let {tabs}=this.data;
      // let tabs=this.data;
      // 4 循环数组
      // [].forEach 遍历数组 遍历数组的时候 修改了 v ，也会导致源数组被修改
      // tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);

      // this.setData({
        // tabs
      // })
    }
  }
})

二、页面声明引入自定义组件

在页面的json文件中进行引用声明

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

三、页面中使用自定义组件

<!-- 
  1 父组件(页面) 向子组件 传递数据 通过 标签属性的方式来传递
    1 在子组件上进行接收
    2 把这个数据当成是data中的数据直接用即可
  2 子向父传递数据 通过事件的方式传递
    1 在子组件的标签上加入一个 自定义事件
  
 -->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >

<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:else>3</block>
 
</Tabs>

四、父子组件传值

父组件通过属性的方式给子组件传递参数
子组件通过事件的方式向父组件传递参数

过程

1.父组件把数据 {{tabs}} 传递到子组件的 tabItems 属性中
2.父组件监听 onMyTab 事件
3.子组件触发 bindmytap 中的 mytap 事件

⾃定义组件触发事件时，需要使⽤ triggerEvent ⽅法，指定 事件名 、 detail 对象
4.⽗ -> 子动态传值 this.selectComponent("#tabs");

代码

父组件
在这里插入图片描述
子组件