微信小程序组件的使用

今天学习了微信小程序的组件化开发，发现和vue是挺像的，为了让自己的思路更加的清晰，我将把思路写下来
在创建组件之前我们需要知道什么是子组件，什么是父组件，子组件其实就是我们自己定义的组件，比如这里我们自己定义了一个tabs组件，那么这个就是子组件，父组件就是我们使用子组件的这个就是父组件

1、首先我们要创建一个组件，这里我创建了一个tabs组件

2、创建了之后需要在子组件的js里定义一下它的属性

properties: {
    tabs:{
      type:Array,
      value:[]
    }
  },

然后再把它的样式写一下

<view class="tabs">
    <view class="tabs_title">
        <view class="title_item {{item.isActive?'active':''}}"
            wx:for="{{tabs}}"
            wx:key="id"
            bindtap="handleItemTap"
            data-index="{{index}}"
        >{{item.value}}</view>
    </view>
    <view class="tabs_content">
        <slot></slot>
    </view>
</view>

css：

/* components/Tabs/Tabs.wxss */
.tabs{}
.tabs_title{
    display: flex;
    
}
.title_item{
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    padding: 15rpx 0;
}
.active{
    color: var(--themeColor);
    border-bottom: 5rpx solid currentColor;
}
.tabs_content{}

之后我们需要在父组件先引入这个子组件
我们找到父组件的json，然后将子组件引入进去

"usingComponents": {
    "SearchInput":"../../components/SearchInput/SearchInput",
    "Tabs":"../../components/Tabs/Tabs"
  },

之后就需要在父组件进行修饰拉
tabs我们定义成了一个数组，然后里面有value这个属性，但是没有写具体的值是什么，这个值就会写在父组件的js里，我们将这个值写在data里面

 data: {
    tabs : [
      {
        id:0,
        value:"综合",
        isActive:true
      },
      {
        id:1,
        value:"销量",
        isActive:false
      },
      {
        id:2,
        value:"价格",
        isActive:false
      }
    ]

但是我们需要有一个切换tab栏的效果，所以这个时候再回到我们的子组件，给他写一个方法，这个方法是我们自己命名的而且我们需要将它传回给父组件
所以找到子组件的wxml，给他绑定一个方法

然后再在js里面讲一个新的方法传给父组件

 methods: {
      handleItemTap(e) {
        const {index} = e.currentTarget.dataset;
        this.triggerEvent("tabsItemChange",{index})
      }
  }

然后再父组件里进行绑定：

最后再是在父组件的js里写这个方法：

handleTabsItemChange(e){
    const {index} = e.detail;
    let {tabs} = this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
    this.setData({
      tabs
    })
  },

此时就差最后一步了，就是将我们的slot写进去
所以在我们父组件的wxml里写上block并给它写上wx：if

 <block wx:if="{{tabs[0].isActive}}">0</block>
    <block wx:if="{{tabs[1].isActive}}">1</block>    
    <block wx:if="{{tabs[2].isActive}}">2</block>

这样一个tap栏的小demo就实现拉