本文详细解析了如何使用Vue.js实现一个标签页组件。内容包括所需的文件结构，核心代码分解，以及组件之间的通信，如pane组件通过$parent访问tabs组件更新标题，并在mounted和prop变更时调用updateNav方法。tabs组件通过$children获取pane实例，动态渲染标题，使用v-for和v-bind:class处理选中状态，并监听currentValue变化以更新pane显示状态。
1.所需要的文件及结构
2.标签页组件的核心代码分解
先初始化各个文件
●index.html
●tabs.js
●pane.js
pane需要控制标签页内容的显示与隐藏，设置一个data：show,并且用v-show指令来控制元素；
当点击到这个pane对应的标签页标题按钮时，此pane的show值设置为true，否则应该是false，这步操作是在tabs组件上完成的，我们稍后再介绍。
既然要点击对应的标签页标题按钮。那应该有一个唯一的值来标识这个 pane, 我们可以设置个prop: name让用户来设置，但它不是必需的。如果使用者不设置，可以默认从0开始自动设置，这步操作仍然是tabs执行的，因为pane本身并不知道自己是第几个。除了name. 还需要标签页标题的prop: label, tabs 组件需要将它显示在标签页标题里。这部分代码如下：
上面的prop: label 用户是可以动态调整的，所以在pane初始化及label更新时，都要通知父组件也更新，因为是独立组件，所以不能依赖像bus.js或vuex这样的状态管理办法，我们可以直接通过this.$parent访问tabs组件的实例来调用它的方法更新标题，该方法名暂定为updateNav。注意，在业务中尽可能不要使用$parent来操作父链，这种方法适合于标签页这样的独立用件，这部分代码如下:
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
