小程序自定义组件

1、组件声明

页面json文件--usingComponents属性

//页面json文件
{
  "usingComponents": {
    "Tabs":"../../components/tabs/tabs"
  }
}

2、父子组件传值

• 父向子传值，类似vue,父组件引用时标签添加属性,队形子组件中properties（同vue的props）
  -子向父传值，在子组件中使用this.triggerEvent('myEvent'，参数)，父组件中标签中监听自定义事件bindmyEvent= "handleMyEvent"，获取传参使用e.detail
• slot 占位

  11111111111
  22222222222
  33333333333
  44444444444

// 父js
Page({
  data: {
    tabs:[
      {
        id:0,
        name:'首页',
        isActive:false
      },
      {
        id:0,
        name:'原创',
        isActive:true
      },
      {
        id:0,
        name:'分类',
        isActive:false
      },
      {
        id:0,
        name:'关于',
        isActive:false
      } ,
    ]
  },
  handleTabChange(e){
    const index = e.detail
    let {tabs} = this.data
    tabs.forEach((tab,i)=>i===index?tab.isActive=true:tab.isActive=false)
    this.setData({
      tabs
    })
    console.log(this.data.tabs)
  }
})

  
      
          {{tab.name}}
      
  
  
    
  

//子组件js
Component({
  properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },
  methods: {
    tabSwitch(e){
      const {index} = e.target.dataset
      this.triggerEvent("tabChange",index)
    }
  }
})

tips

• 自定义组件使用时，名称大小写敏感
• 与页面不同自定义组件中的事件回调函数存放在methods中
• 不能直接修改this.data中变量的值
• 组件中observers相当于vue的watch，只存在于组件中
• created,组件刚刚被创建时触发，不可使用setData，常用于给组件this添加自定义属性字段
• attached,组件初始化完毕后触发，绝大多数初始化工作此处进行
• detached,组件销毁时触发