实现选项卡和下面的内容进行关联。点击上面的选项卡，下面的内容也会跟着变化。
image.png
先把红色的边框去掉。
image.png
增加一个事件来监听左右的滚动，帮助我们去完成对swiper的滑动监听。
image.png
我们来注册一下这个change事件，打印一下看看chaneg事件给我们返回了一个什么样的内容。
image.png
切换的时候
image.png
我们只去关注detail就可以了，current当前的索引，从0开始的。
image.png
这里控制当前选择的第几项
image.png
比如我们把它改成2
image.png
然后回来刷新下页面，默认就被选择了第3项。
image.png

自定义事件

使用emit传递给index.
image.png
获取detail里面的current,传递给change
image.png
在index里面监听list传递出来的事件
image.png
上面的@change就是emit里面定义的事件名
image.png
监听@change事件，并接收这个事件。
image.png
接收并打印接收到的值。
image.png

当滑动的时候
image.png
这样我们只需要把拿到的current传递给tab组件就可以了。
image.png

tab接收

给ta定义一个tabIndex属性去接收。
image.png
index里面初始值默认为0.
image.png
接收到的值复制给tabIndex.
image.png
然后再把tabIndex传递给tab组件。
image.png

tab组件内定义属性

image.png
这样就需要传递来的tabIndex赋值给activeIndex
image.png
watch事件，监听data或者是props里面值的变化。
image.png
监听tabIndex就把tabIndex写到这里，再这里它是一个方法。它会接收两个值，一个是newValue是一个oldValue
image.png
分别输出这两个值。看下到底能不能监听到tabIndex的值的变化。
image.png

这里先注释掉。
image.png
这里也注释掉
image.png
滑动一下，输出值
image.png
新的值复制给activeIndex
image.png
默认的tab值改回1
image.png
image.png
滑动后
image.png

tab点击事件

list加一个activeIndex的属性
image.png
声明这个属性
image.png
image.png

list增加属性直接activeIndex

image.png

通过activeIndex让swiper跳转到某一项

swiper有一个属性current就是要跳转第几项。
image.png
image.png
点击了 自动切换了
image.png
这就是选项卡和内容的联动效果

结束