简单的父子传参tab切换,希望可以帮助到你我

首先我们在父组件需要定义我们的列表数据,当然tab切换也少不了我们的下标

// Tab数据
      tabList:[
        {
          id:1,
          title:"我的",
          children:[
            {
              con:'脆香香',
              pri:'15.25'
            },
            {
              con:'鸡腿',
              pri:'18.24'
            }
          ]
        },
        {
          id:2,
          title:"他的",
          children:[
            {
              con:'库洛米',
              pri:'155'
            },
            {
              con:'粉红豹',
              pri:'12584'
            }
          ]
        },
      ],

// Tab切换的下标
      aIndex:0,

其次定义好子组件 在父组件引入并使用 这里就比如我们创建了一个简单的tab.vue

import Tab from './components/Tab.vue'

其次在html页面使用它: list是相对应的列表数据 aIndex是下标

 <Tab 
       :list="tabList"
       :aIndex="aIndex"
 />

最重要的一点一定不要忘记在父组件的components里面注册一下我们的组件

 components: {
    Tab, // Tab切换
 },

子组件要做的操作:

1. 首先先接受父组件传递过来的数据:

 props:{
      // 数据列表
      list:{
          type:Array,
          default:[],
      },
      // 下标
      aIndex:{
          type:Number,
          default:0,
      }
  },

2.拿到数据后我们的页面就可以进行正常的渲染前端页面了

      <div class="tab">
            <ul 
                v-for="item,index of list" :key="index" 
                @click="clickItem(index)"
                :class="aIndex === index ? 'active' : ''"
                >
                {{item.title}}
            </ul>
      </div>
      <div v-for="item,index of list[aIndex].children" :key="index">
          <p>{{item.con}}</p>
          <p>{{item.pri}}</p>
      </div>

3. 我们可以在子组件样式定义一个active:{color:red}

    通过:动态的去修改点击他的样式

4. 如果我们想要修改父组件的东西 在子组件定义一个方法 也就是以上代码第四行

   在子组件的methods里面

  

methods: {
      clickItem(index) {
          this.$emit('changeIndex',index)
      },
},

父组件:

    1. 首先接受改方法

        @后面的必须要和子组件$emit后面的方法同名

<Tab 
       :list="tabList"
       :aIndex="aIndex"
       @changeIndex = "changeIndex"
     />

 2.其次就可以在父组件的methods里面进行修改

    

methods:{
   changeIndex(index){
         this.aIndex = index
    },
}