小程序中的“tab切换卡”

小程序的自定义组件设置

涉及的知识点：
自定义组件的创建、自定义组件的使用、父向子传递数据、子向父传递数据
1、创建自定义组件


2、Tab组件的布局和样式设置
Tab组件JS（tabs.js文件中代码）：

Component({
   
    properties: {
   //组件的属性列表 存放的是从父组件中接收的数据
    tabs:{
   type:Array,value:[]}
  },
  /**
   * 组件的方法列表
   * 页面.js文件中 存放事件回调函数时 存放在data同层级下
   * 组件.js文件中 存放事件回调函数时 放在method中
   */
  methods: {
   
hanldeitem(e){
   
	 //点击事件触发时，触发父组件中的自定义事件 同时传递数据给父组件
	 // 获取被点击的索引
      const {
   index} = e.currentTarget.dataset;
	 // 触发父组件中的自定义事件
	 // this.triggerEvent["父组件自定义事件的名称"，要传递的参数]
      this.triggerEvent("itemChange",{
   index})
       let {
   tabs} = this