Tabs组件做展示页面

当前页面

被选中的组件标记上selected
思路1 用v-if

 <component
          class="neko-tabs-content-item"
          v-if="c.props.title===selected"
          v-for="(c, index) in defaults"
          :is="c"
          :key="index"
        />

结果报错 : c 未定义,查了官方文档,不推荐使用


官方文档

方法二:使用<component :is=current/>



用filter筛选,看哪一个tag的title等于当前元素的title。filter筛选结果是数组,就算一个也是数组,所以取出第0项



然后在元素上面添加点击事件:select,定义selectet事件,当title的值发生改变,就改变select。外面用v-model监听
每次点击之后,select改变,但是对应的current 不会重新计算,set up只会在页面挂载组件的时候计算一次,不会算第二次,所以current应该是个计算属性。用computed

可是点击之后还没有切换……
把current在页面里打出来


页面1
导航2

导航2的title变了,但是内容没变。说明current是正确的但是内容2好像不属于current, 内容在外部。
最后,不用v-if,用class,默认的时候不显示,选中的时候显示,

//<template>
 <div class="neko-tabs-content">
        <component
          class="neko-tabs-content-item"
          :class="{ selected: c.props.title === selected }"
          v-for="(c, index) in defaults"
          :is="c"
        />
//scss
  &-content {
      padding: 8px 0;
      &-item {
        display: none;
        &.selected {
          display: block;
        }
      }
    }

推荐阅读更多精彩内容