上一章，我们简单介绍了自定义组件的基本使用，
这一章我们来进一步美化这一组件。
我们还是用一个需求来演示。
提出一个需求：创建一个小程序页面，页面上有四个标题，标题下有对应的内容。
如下图网易的小程序，有"要闻"、推荐、原创 三个标题。
点击不同的标题，内容进行不同的切换。
点击网易小程序的"原创"栏，出现如下内容。
分析需求：这需要我们的组件，上层是标题；下层是内容
明确需求和基本步骤，我们就一步步细化着来。
（一）修改组件的标签结构
1、打开文件Tabs.wxml，删除原先的代码内容，加入view标签，创建四个标签结构。代码如下：
<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>
<view class="tabs_content">内容 </view> <!-- 此为内容部分 -->
</view>保存，页面显示如下：
这就是效果图，我们再给它加一些样式。
2、打开样式文件 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{}
复制代码中的 active 至 Tabs.wxml 文件中的首页部分，如下图：
保存，页面的样式显示如下：
（二）修改不同标题中的选中结构
此时的标题已固定，无法将同样的结构放至不同的标题中使用。
所以，我们要怎么做呢？
我们要将标题中的数据抽离出来，先放至一个组件内部数据中，
再由它改向父向子传递的方式来使用。
步骤如下：
1、将 Tabs.wxml 文件中的标题代码注释掉：
2、回到Tabs.js文件中，在data中加入Tabs，用来组建内部数据。
代码如下：
data: {
tabs:[
{id=0,
name="首页",
isActive:"true"
},
{id=1,
name="原创",
isActive:"false"
},
{id=2,
name="分类",
isActive:"false"
},
{id=3,
name="关于",
isActive:"false"
}
]
}
3、打开Tabs.wxml文件中，接着写入如下代码：
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="hanldeItemTap"
data-index="{{index}}"
>
{{item.name}}
</view>保存后，显示效果与上面的一样。
各个标题，谁选中谁未选中，均是由Tabs.js 文件中的isActive 标签决定的。
4、所以，我们将 isActive 加入Tabs.wxml文件中的 class="title_item 中，见下图：
保存后，发现四个标题现在都被同时选中了。
所以说，这样直接加是不行的。
这里我们将isActive 修改为一个判断的方式来加入：
如果值是true，则加入 isActive ；
否则就为一个空字符串。
{{item.isActive?'active':''}}
将 Tabs.wxml 文件中的代码修改如下：
<view
wx:for="{{tabs}}"
wx:key="id"
class="title_item {{item.isActive?'active':''}}"
bindtap="hanldeItemTap"
data-index="{{index}}" >
{{item.name}}
</view>
保存，可以看到页面中仅有第一个标题"首页"被选中。
（三）修改自定义组件
这一部分篇幅较长，我们下一章进行讲解。
再见~~~