浙江学院网站建设境外电商有哪些平台

一、情景介绍：一个显示已发布信息的页面是通过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){其他操作.......}
}

四、谢谢查看！！！！