父子组件之间的传值

父子组件之间的传值

子组件：

<el-menu @select="selectMenu">
       <el-menu-item v-for="item in menuList" :key="item.index" :index="item.index">
        <div slot="title">{{ item.title }}</div>
      </el-menu-item>
</el-menu>
props:{
 menuList:{
  type:Array,
  default(){
  return []
  }
 }
}
methods:{
 selectMenu(index,indexPath){//子组件触发方法，用于父子组件之间通信
  bus.$emit(select,indexPath)//indexPath是子组件与父组件通信的参数
 }
}

父组件：

<LeftMenu :menuList="menuList" @select="selectMenu"></LeftMenu>
<!--绑定的menuList是父组件给子组件传递的值-->

import LeftMenu from './components/leftMenu' //左侧二级菜单
export default {
 data:{
      menuList: [
        {
          title: '标题1',
          index: '1',
        },
        {
          title: '标题2',
          index: '2',
        },
        {
          title: '标题3',
          index: '3',
        },
      ],
 },
  components:{
      LeftMenu,
  }
}
methods:{
 selectMenu(params){
  this.active = params[0]//params是子组件传递给父组件的参数
 }
}