4.自定义组件

自定义组件方法

• 创建components文件夹，创建component自定义组件
• 新增组件：在json文件“usingComponents”使用组件（键值对）例子："Tabs" : "../../componets/Tabs/Tabs"。
• 使用组件：json引用组件对应的xml文件中，看做普通标签使用<Tabs></Tabs>。
• 页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
• 组件.js 文件中 存放事件回调函数的时候 必须存放在 methods中！！！

 

 1.标题激活选中

 /**
   * 1.页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
   * 2.组件.js 文件中 存放事件回调函数的时候 必须存放在 methods中！！！
   */
  methods: {
    hanldeItemTap(e){
  /**
   *  1、绑定事件 需要在methods中绑定；
   *  2、获取被点击的索引
   *  3、获取原数组
   *  4、对数组循环：给每个循环项，选中属性改为false；给当前的索引项添加激活效果
   */
    //获取索引
    const {index}=e.currentTarget.dataset;
     //获取data中的数组
     //解构：对复杂类型进行结构的时候 复制一份 变量引用而已
     //最严谨的做法：重新拷贝一份数组，再对这个数组的备份进行处理:let tabs = JSON.parse(JSON.stringify(this.data.tabs))
     
     //不要直接修改 this.data.数据
     //最严谨的做法
    let {tabs} = this.data;
    //相同于 let tabs = this.data.tabs;
    //循环数组
    //[].forEach 遍历数组的时候，修改了v，也会导致原数组被修改
    tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false);
    this.setData({
      tabs
    })
    }
  }

 

 2.父向子传递数据

• 父组件(页面)向子组件传递数据，通过标签属性的方式来传递
• 在子组件上进行接收 properties,把这个数据当成是data中的数据用即可

<Tabs aaa="a123b"></Tabs> //页面（父组件）使用的组件

 

 /**
   * 子组件.js接收的数据
   */
properties: {
         //要接收的数据名称
         aaa:{
          //type 要接收的数据类型
          type:String,
          //value 没有传值的默认值
          value:""
         }
  },

 

 /**
   * 子组件.wxml直接赋值
   */
 
<view class="tabs_content">
    传的数据{{aaa}}
  </view>

 

 2.子向父传递数据

 

• 子向父传递数据 通过事件的方式传递的：在页面的子组件的标签上加入一个 自定义事件

//页面（父组件）使用的组件
<Tabs tabs="{{tabs}}" binditemChange="handelItemChange"></Tabs>
 

 

 /**
   * 父组件.js
   */
//自定义事件 用来接收子组件传递的数据
handelItemChange(e){
const {index} = e.detail;
let {tabs} = this.data;
tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false);
this.setData({
   tabs
});
}

 

 /**
   * 子组件.js接收的数据
   */
properties: {
         //要接收的数据名称
        tabs:{
          //type 要接收的数据类型
          type:Array,
          //value 没有传值的默认值
          value:[]
         }
  },
/**
   * 1.页面.js 文件中 存放事件回调函数的时候 存放在data同层级下！！！
   * 2.组件.js 文件中 存放事件回调函数的时候 必须存放在 methods中！！！
   */
  methods: {
    hanldeItemTap(e){
      
  /**
   *  1、绑定事件 需要在methods中绑定；
   *  2、获取被点击的索引
   *  3、获取原数组
   *  4、对数组循环：给每个循环项，选中属性改为false；给当前的索引项添加激活效果
 
   *  5、点击事件触发的时候：触发组件的自定义事件，同时传递数据过去到父组件
   *    this.triggerEvent("父组件自定义事件的名称"，要传递的参数)
   */
    //获取索引
 
    const {index}=e.currentTarget.dataset;
    this.triggerEvent("itemChange",{index});
     //获取data中的数组
     //解构：对复杂类型进行结构的时候 复制一份 变量引用而已
     //最严谨的做法：重新拷贝一份数组，再对这个数组的备份进行处理:let tabs = JSON.parse(JSON.stringify(this.data.tabs))
     
     //不要直接修改 this.data.数据
     //最严谨的做法
    //let {tabs} = this.data;
    //相同于 let tabs = this.data.tabs;
    //循环数组
    //[].forEach 遍历数组的时候，修改了v，也会导致原数组被修改
    // tabs.forEach((v,i) =>i===index?v.isActive=true:v.isActive=false);
    // this.setData({
    //   tabs
    // })
 
    }
  }

 

 3.自定义组件-slot

//在子组件.wxml里
<view class="tabs_content">
  <!-- slot是一个占位符 插槽 
        等父组件调用 子组件时再传递标签过来，传递过来的标签会替换slot插槽的位置
  -->
    <slot></slot>
  </view>

//在（页面）父组件.wxml里
<Tabs tabs="{{tabs}}" binditemChange="handelItemChange">
<block wx:if="{{tabs[0].isActive}}">1</block>
<block wx:elif="{{tabs[1].isActive}}">2</block>
<block wx:elif="{{tabs[2].isActive}}">3</block>
<block wx:else="{{tabs[3].isActive}}">4</block>
</Tabs>