Vue中父子页面（组件）相互传值的方法

一、情景介绍：一个显示已发布信息的页面是通过search(即搜索框)的子组件和table(即列表)的子组件拼接组合而成的，现在传数据的时候遇到问题：怎样把search子组件填写的条件通过点击搜索按钮即时的传给table子组件,  从而进行符合条件的查询，以下是父页面的效果图及其页面结构的主要代码：

<template>
  <div class="published-index">
    <div class="search-item">
      <Title title="已发布信息"></Title>
      <!--这个是引入的搜索的子组件-->
      <Search :searchTitle="menuTitle" v-on:search="search"></Search>
    </div>
    <!--这个是引入的列表的子组件-->
    <Table :title="menuTitle" ref="searchTable"></Table>
  </div>
</template>
<script>
import Table from '../compnents/Table'
import Search from '../compnents/Search'
import Title from '../compnents/Title'
export default {
  name:'Published',
  props:['menuTitle'],
  components:{
    Table,
    Title,
    Search,
  }
}

二、页面结构分析：已发布信息页面是父页面，search和table属于同级，但都属于已发布信息页面的子页面，现在如果想search子组件上的条件能通过搜索按钮及时的传给同级的table子组件，则需要把条件值先传给父页面，再通过父页面再传给子页面table，方能达到目的。

三、子传父和父传子具体代码如下：

a.子组件search的点击搜索事件的代码,其中双引号中search,是对应父页面中search子组件上相同的方法名的：

//搜索提交把值传给table
onSubmit(searchTitle){
  //模块标题
  this.$emit("search",searchTitle,this.getUserId, this.biaoti, this.startTime, 
  this.endTime, this.belongUser, this.valueType2)
}

b.已发布信息父页面上具体代码：

<!--父页面相关代码-->
<!--这个是引入的搜索的子组件-->
<!-- 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)

  }
}

c.table子组件接收父页面的传值代码如下：

<!--table页-->
methods: {
    //search传过来的值（中间是通过父页面传过来的）
    pushParams(getUserId, biaoti, startTime, endTime, belongUser, valueType){
       其他操作.......
    }
}

四、谢谢查看！！！！