vue中父给子传值

父亲：

<template>

    <div class="con">

        <div class="one">

            <div class="one_left">

                <div class="one_route">当前位置：</div>

                <el-breadcrumb separator-class="el-icon-arrow-right" class="one_route">

                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>

                    <el-breadcrumb-item>操作指南</el-breadcrumb-item>

                </el-breadcrumb>

            </div>

        </div>

        <div class="two">

//这个是孩子

            <leftmenu :toChildrenData="toChildrenData" />

            <div class="two-right">

                <div class="two-right-top">

                    <div style="display:flex">

                        <el-input style="width:360px;" prefix-icon="el-icon-search" v-model="keyword" placeholder="请输入想要查找的关键词"></el-input>

                        <div class="searchdiv">搜索</div>

                    </div>

                    <div class="two-right-resule">共找到<span style="margin:5px">2</span>条信息</div>

                </div>

                <div class="two_right_list" v-for="index in 5" :key="index" @click="detail">

                    <div style="display:flex;justify-content: space-between;">

                        <div class="list_title">国有土地使用权转让</div>

                        <div class="list_date">2021-03-01

                            <div style="display:inline-block;margin-left:30px;"><el-link type="primary">下载</el-link></div>

                        </div>

                    </div>

                    

                </div>

                <div class="two_foot">

                    <el-pagination

                        background

                        layout="prev, pager, next"

                        :total="1000">

                    </el-pagination>

                </div>

            </div>

        </div>

    </div>

</template>

 

<script>

export default {

    data(){

        return {

            keyword:'',

            toChildrenData:{

                icon:'el-icon-discover',

                menuData:{

                        name:'操作指南',

                        children:[

                            {

                                name:'发布土地'

                            },{

                                name:'委托交易'

                            }

                        ]

                    }

                

            }

 

        }

    },

    methods:{

        

      detail(){

          this.$router.push({name:'guide-detail'});

      }

    }

}

</script>

 

<style scoped>

    .two{

        padding:20px 0px 20px 0px;

        display:flex;

        justify-content: space-between;

        /* height:760px; */

    }

    

    .two-right{

        width:1000px;

    }

    .two-right-top{

        display:flex;

        justify-content: space-between;

    }

    .two-right-resule{

        color:#303D47;

        font-size: 12px;

    }

    .searchdiv{

        width:80px;

        height:38px;

        color:#1890FF;

        border:1px solid #1890FF;

        line-height: 38px;

        text-align: center;

        display: inline-block;

        font-size: 14px;

        font-weight: 600;

        border-radius: 0px 4px 4px 0px;

    }

    .two_right_list{

        border:1px solid #E6E6E6;

        height: 60px;

        margin-top:20px;

        padding:20px;

        line-height: 60px;

    }

    .list_title{

        color:#303D47;

        font-size:14px;

        font-weight: 600;

        

    }

    .list_date{

        color:#B4BCC4;

        font-size: 12px;

    }

    .two_foot{

        margin-top:20px;

        text-align: center;

    }

    .two_right_list:hover{

        background-color:#FAFAFA;

    }

</style>

 

 

孩子：leftmenu.vue

<template>

    <div class="two_left">

                <el-row class="tac">

                    <el-col>

                        <el-menu  default-active="0" :default-openeds="['1']" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">

                            <el-submenu index="1">

                                <template slot="title">

                                    <i :class="toChildrenData.icon"></i>

                                    <span>{{toChildrenData.menuData.name}}</span>

                                </template>

                                <el-menu-item-group v-for="(item,index) in toChildrenData.menuData.children" :key="index">

                                    <el-menu-item :index="index+''">{{item.name}}</el-menu-item>

                                </el-menu-item-group>

                            </el-submenu>

                         </el-menu>

                    </el-col>

                </el-row>

            </div>

</template>

 

<script>

export default {

    props:{

        toChildrenData:{

            type:Object,

            default(){

                return {}

            }

        }

    },

    data(){

        return {

 

        }

    },

    methods:{

         handleOpen(key, keyPath) {

        console.log(key, keyPath);

      },

      handleClose(key, keyPath) {

        console.log(key, keyPath);

      },

    }

}

</script>

 

<style scoped>

    .two_left{

        width:260px;

        border:1px solid #E6E6E6;

    }

    .el-menu-item.is-active {

      background-color: transparent !important;

    }

    .el-menu-item:hover{

        background-color: transparent !important;

    }

    /deep/ .el-submenu__title:hover{

        background-color: transparent !important;

        color:#1890FF;

    }

    /deep/ .el-menu{

        border-right:none;

    }

    /deep/ .el-menu-item{

        border-bottom:1px solid #E6E6E6;

    }

    /deep/ .el-submenu{

        border-bottom:1px solid #E6E6E6;

    }

    /deep/ .el-submenu__title{

        border-bottom:1px solid #E6E6E6;

    }

    /deep/ .el-menu-item-group__title{

        padding:0px;

    }

    /deep/ .el-submenu.is-active .el-submenu__title {

     border-bottom-color: #E6E6E6;

    }

</style>