VUE中多个子组件加载同一页面中互相传值
页面中包含两部分 search + table 合成,需要将search中填写的参数传给table,并执行其它操作,如下图示例
v-on用法可参考:https://v3.cn.vuejs.org/api/directives.html#v-on
此为合成页面,我们暂且叫它list页面
<template> <div> <!--这个是引入的搜索的子组件--> <Search v-on:search="search"></Search> <!--这个是引入的列表的子组件--> <Table ref="searchTable"></Table> </div> </template> <script> import Table from '../compnents/Table' import Search from '../compnents/Search' export default { components:{ Table, Search, } }
操作步骤:
1.search页面将值传给list,子组件search的点击搜索事件的代码,其中双引号中search,是对应父页面中search子组件上相同的方法名的:
//搜索提交把值传给table onSubmit(searchTitle){ //模块标题 this.$emit("search",searchTitle,this.getUserId, this.biaoti, this.startTime, this.endTime, this.belongUser, this.valueType2) }
2.list页面相关参数
<!--父页面相关代码--> <!--这个是引入的搜索的子组件--> <!-- v-on:search="search" 是search子组件往父页面传值的标志--> <Search :searchTitle="menuTitle" v-on:search="search"></Search> <!--这个是引入的列表的子组件--> <!-- ref="searchTable" 是父页面往子页面table传值的标志--> <Table :title="menuTitle" ref="searchTable"></Table> methods: { //已发布信息父页面接收search子页面传值的方法 search(searchTitle, getUserId, biaoti, startTime, endTime, belongUser, valueType){ //把search子页面传过来的值,再通过父传子的方法传给table子组件 //以下的searchTable就是对应table子组件的ref,pushParams为子组件table中methods中定义的方法名 this.$refs.searchTable.pushParams(getUserId, biaoti, startTime, endTime, belongUser, valueType) } }
3.table子组件接收父页面的传值代码如下:
<!--table页--> methods: { //search传过来的值(中间是通过父页面传过来的) pushParams(getUserId, biaoti, startTime, endTime, belongUser, valueType){ 其他操作....... } }
4.延伸扩展
当我们设计左右布局后台界面的时候,如下图
左边的菜单是一个子页面,那右边的顶部是在父页,右边的profile是动态加载进来的,如果在右边的顶部增加一个缩放(展开、收缩)左侧菜单的按钮,那就可以简单的实现啦
4.1 增加一个按钮,绑定事件并传值给左侧页面
this.$refs.leftNav.setCollapse(this.isCollapse);
4.2 左侧页面接收这个值,并设置
setCollapse(isCollapse){ this.isCollapse = isCollapse; },
5.子页面单纯的向父页面传值方式二:
5.1子页面
this.$emit('sendmsg', '我爱你');
5.2父页面
<child @sendmsg='getMsg'/>
getMsg(data){ console.log(data);//我爱你 },