van-datetime-picker 获取子选项_iviewUI-Tabs选项卡切换组件

概述

选项卡切换组件，常用于平级区域大块内容的的收纳和展现。

源码地址：https://github.com/iview/iview/tree/2.0/src/components/tabs

使用：

标签一的内容

标签二的内容

标签三的内容

标签二的内容

在源码的tabs文件下有三个文件：index.js,tabs.vue,pane.vue

index.js中引入了tabs.vue和pane.vue.

import Tabs from './tabs.vue';

import Pane from './pane.vue';

Tabs.Pane = Pane;

export default Tabs;

tabs.vue

tabs.vue是整个组件的容器，分为三部分：

1 通过 扩展tabs选项的附加内容。

2 通过this.$children获取tabs下的每一个TabPane并放进navLIst，遍历navLIst设置tabs选项标签。

3 声明slot接收整个panes。

this.$children查找当前组件的直接子组件，可以遍历全部子组件，需要注意 $children 并不保证顺序，也不是响应式的。

slot 插槽

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。Slot分发的内容，作用域是在父组件上

:class="[prefixCls +'-nav-container']"

tabindex="0"

ref="navContainer"

@keydown="handleTabKeyNavigation"

@keydown.space.prevent="handleTabKeyboardSelect(false)"

>

{{ item.label }}