vue点击子组件,父组件达到实时切换效果

vue点击实现 动态切换的效果

直接上图

涉及的技术

1.子传父

子 this.$emit( “父自定义事件”,传递的参数)

父 <标签 @父自定义事件=‘函数名’></标签>
函数名(接收的子组件参数 ){ 内部更新的函数体 }

2.父传子

子组件prop: {属性定义 数组数组} 接收 父组件的传值

3.方法

arr.includes() //判断一个数组是否包含一个指定的值, 如果是返回 true,否则false
arr.filter() // 过滤数组,内部return返回新数组
arr.findIndex() // 内部return返回找到第一个数的索引值,一般配合循环使用
arr.splice() //数组方法splice(删除的位置,删除的数量,[可选插入的值])
async await 异步加载

放代码

父 index.vue

<template>
  <div class="home-container" >
    <!-- 顶部导航栏 -->
     <van-nav-bar class="page-nav-bar" id="ellipsis" fixed>
        <van-button slot="title" class="search-btn"
        size="small" round type="info" icon="search" overflow="no" >
          <!-- <van-icon slot="icon" name="search"></van-icon> -->
          搜索
        </van-button>
     </van-nav-bar>
    <!-- /顶部导航栏 -->

<!-- 用户频道列表栏 -->
<!-- vant组件 的自定义属性 cative 绑定索引, swipeable开启滑动,animated动画效果  -->
<!-- vue-for 循环我的频道,通过 索引,绑定index高亮的active -->
<!-- v-model="active" 控制高亮显示的索引位置,active为数字型 -->
<van-tabs class="channel-tabs" v-model="active" swipeable animated >
  <van-tab   v-for="(obj,index ) in channelsArr" :key="index" :title="obj.name">
    <!--频道的 文章内容 组件:实际上是下面的整个内容封装成一个组件,即一个用户频道对应一个文章内容页面(有N条数据)-->
      <activeList :channelsObj="obj"></activeList>
    <!-- /频道的 文章内容 -->
  </van-tab>
  <div slot="nav-right" class="placeholder" ></div>
  <div slot="nav-right" class="hamburger-btn">
    <i class="haian haian-gengduo" @click="isChannelEditShow=true"></i>
  </div>
</van-tabs>
<!-- /频道列表 -->
<!-- 频道编辑弹出层 -->
  <van-popup 
   position="bottom"  closeable
   close-icon-position="top-left"
  class="edit-channel-popup"
  v-model="isChannelEditShow"
   :style="{ height: '100%' }"
>
<!-- 父组件 自定义事件接收参数 -->
<!-- 父传子: 子组件定义proo的变量接收父组件的值 -->
<channelEdit
:active='active'
:userChannels="channelsArr"
@addUserChannels="addUserChannelsFn"
@delUserChannels="delUserChannelsFn">
</channelEdit>
</van-popup>
<!-- /频道编辑弹出层 -->
  </div