吕滔博客

页面中包含两部分 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);//我爱你
},