前端vue阶段案例：父子组件通信-tabControl栏

Posted 2022-11-19 karshey

文章目录

• • 目标
  • 代码
  • • 0.结构：数据父传子
    • 1.点击改变样式：排它
    • 2.点击改变页面内容：子传父
  • 总代码
  • • 父App.vue
    • 子TabControl.vue
  • 参考

目标

• 移动端
• 点击tab栏对应选项，则对应选项变红，有下边框，且显示相应页面
• 这里我们点衣服则显示"衣服页面"，以此类推，要排它
• 用flex布局

代码

0.结构：数据父传子

在这里要完成的：要把结构写出来。

• 由于是动态的数据，我们不能直接把数据写死
• 而是要通过 父传子 的通信方式，把数据从App.vue传给TabControl.vue，用v-for循环显示
• 如何父传子：父写在自己的动态绑定的属性attribute里，子在props属性里接收
• 用flex布局

App.vue:

<template>
    <div class="app">
        <!-- tabControl栏 -->
        <tab-control :titles="['衣服','裤子','鞋子']"></tab-control>
        <!-- 页面内容 -->
    </div>
</template>

<script>
import TabControl from './TabControl.vue'
export default 
    components:
        TabControl
    ,
    data:function()
        return
            
        
    

</script>

<style>

</style>

组件TabControl.vue:

<template>
    <div class="tab-control">
        <template v-for="(item, index) in titles" :key="index">
            <div class="tab-control-item">
                <span>
                     item 
                </span>
            </div>
        </template>
    </div>
</template>

<script>
export default 
    // 通信:父传子
    props: 
        titles: 
            type: Array,
            // 如果参数为空则返回空数组
            default: () =>  
        
    

</script>

<style>
.tab-control 
    display: flex;
    height: 44px;
    line-height: 44px;
    text-align: center;


.tab-control .tab-control-item 
    flex: 1;

</style>

效果：

1.点击改变样式：排它

效果：点哪里，哪里就显示红色，且有下划线。

在tab栏的item这里添加active类和点击事件：

<div :class="active:currentIndex===index" 
@click="itemClick(index)" class="tab-control-item">

添加currentIndex数据和itemClick方法：

export default 
    // 通信:父传子
    props: 
        titles: 
            type: Array,
            // 如果参数为空则返回空数组
            default: () =>  
        
    ,
    data:function()
        return
            // 排它的下标
            currentIndex:-1
        
    ,
    methods:
        itemClick:function(index)
            this.currentIndex=index;
        
    

active后的css样式：

.active 
    color:red;


.active span 
    border-bottom:2px solid red ;
    padding:0 10px;

效果：

2.点击改变页面内容：子传父

效果：点”衣服“，则显示”衣服页面“，以此类推。

子传父：把事件tabItemClick传给父，且参数为index

methods:
   itemClick:function(index)
       this.currentIndex=index;
       // 子传父:事件名称,参数
       this.$emit("tabItemClick",index)
   

于是父要监听事件tabItemClick：

<tab-control @tabItemClick="tabItemClick" 
:titles="['衣服','裤子','鞋子']"></tab-control>

当触发事件tabItemClick后就执行函数tabItemClick：目的是显示对应的页面。

data:function()
    return
        currentIndex:-1,
        pageContent:['衣服页面','裤子页面','鞋子页面']
    
,
methods:
    // 这里的index是子传父时的参数
    tabItemClick:function(index)
        // 显示对应参数的页面,这里的currentIndex是数组下标
        this.currentIndex=index
    

html：

<!-- 页面内容 -->
<h1>pageContent[currentIndex]</h1>

效果：

总代码

父App.vue

<template>
    <div class="app">
        <!-- tabControl栏 -->
        <tab-control @tabItemClick="tabItemClick" :titles="['衣服','裤子','鞋子']"></tab-control>
        <!-- 页面内容 -->
        <h1>pageContent[currentIndex]</h1>
    </div>
</template>

<script>
import TabControl from './TabControl.vue'
export default 
    components:
        TabControl
    ,
    data:function()
        return
            currentIndex:-1,
            pageContent:['衣服页面','裤子页面','鞋子页面']
        
    ,
    methods:
        // 这里的index是子传父时的参数
        tabItemClick:function(index)
            // 显示对应参数的页面,这里的currentIndex是数组下标
            this.currentIndex=index
        
    

</script>

<style>

</style>

子TabControl.vue

<template>
    <div class="tab-control">
        <template v-for="(item, index) in titles" :key="index">
            <div :class="active:currentIndex===index" @click="itemClick(index)" class="tab-control-item">
                <span>
                     item 
                </span>
            </div>
        </template>
    </div>
</template>

<script>
export default 
    // 通信:父传子
    props: 
        titles: 
            type: Array,
            // 如果参数为空则返回空数组
            default: () =>  
        
    ,
    data:function()
        return
            // 排它的下标
            currentIndex:-1
        
    ,
    methods:
        itemClick:function(index)
            this.currentIndex=index;
            // 子传父:事件名称,参数
            this.$emit("tabItemClick",index)
        
    

</script>

<style>
.tab-control 
    display: flex;
    height: 44px;
    line-height: 44px;
    text-align: center;


.tab-control .tab-control-item 
    flex: 1;


.active 
    color:red;


.active span 
    border-bottom:2px solid red ;
    padding:0 10px;

</style>

参考

Vue组件之间的通信-父传子-子传父