vue 父传子 props_props: { iscollapse:boolean }意思-优快云博客

本文链接：https://blog.youkuaiyun.com/gaojing694855420/article/details/135690879

本文介绍了在Vue应用中如何通过props让子组件接收并处理来自父组件的`isCollapse`值，展示了组件间数据的双向流动。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

子组件利用props接收父组件值

index.vue

<template>
    <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246);height: 100%;margin-left: -1px;" >
            <Aside :isCollapse="isCollapse"></Aside>
        </el-aside>

        <el-container style="height: 100%">
            <el-header style="text-align: right; font-size: 12px;border-bottom: rgba(169,169,169,0.3) 1px solid">
                <Header @doCollapse="doCollapse"></Header>
            </el-header>

            <el-main style="height: 100%">
                <Main></Main>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import Aside from "./Aside";
    import Header from "./Header";
    import Main from "./Main";
    export default {
        name: "Index",
        components: {Main, Header, Aside},
        data(){
            return{
                isCollapse:false
            }
        },
        methods:{
            doCollapse(){
                console.log('11')
                this.isCollapse=!this.isCollapse
            }
        }


    }
</script>

<style scoped>
    .el-header {
        /*background-color: #B3C0D1;*/
        color: #333;
        line-height: 60px;
    }
    .el-aside {
        color: #333;
    }
    .el-main {
        padding: 5px;
    }
</style>

Aside.vue

<template>
    <el-menu style="height: 100vh"
             background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b"
             default-active="/Home"
             :collapse="isCollapse"
             :collapse-transition="false"
            >
        <el-menu-item index="/Home">
            <i class="el-icon-s-home"></i>
            <span>首页</span>
        </el-menu-item>

        <el-menu-item  index="/One">
            <i class="el-icon-s-flag"></i>
            <span>导航一</span>
        </el-menu-item>

        <el-menu-item index="/Two">
            <i class="el-icon-s-order"></i>
            <span>导航二</span>
        </el-menu-item>
    </el-menu>
</template>

<script>
    export default {
        name: "Aside",
        data(){
            return{
               // isCollapse:false
            }
        },
        props:{
            isCollapse:Boolean
        }
    }
</script>

<style scoped>

</style>