《Vue.js实战》 标签页组件

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来操作父链，这种方法适合于标签页这样的独立用件，这部分代码如下:

        在生命周期mounted,也就是pane初始化时，调