VUE中一个页面调用另一个页面的方法并修改数据data（记一次自己入的坑）

 A页面

<template>
    <div class="member-main">
        <el-form class="member-form" ref="form" :model="params" label-width="80px">
            <el-row>
                <el-form-item label="用户名" prop="name">
                    <el-input v-model="params.name" placeholder="请输入用户名" size="30"></el-input>
                </el-form-item>
                <el-form-item label="时间" prop="date">
                     <el-date-picker v-model="params.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
            </el-row>
            <div class="el-form-button">
                <el-button type="primary" @click="toPage('lo')">查询</el-button>
                <el-button type="primary" @click="toPage('l')">重置</el-button>
            </div>
        </el-form>
        <!-- 此处引入组件 -->
        <app-table ref="apptable"></app-table>
    </div>
</template>
<script>
import AppTable from '@/components/AppTable';
export default {
    components:{
        AppTable
    },
    data(){
        return {
            params:{
                name:'',
                date:'',
            }
        }
    },
    methods: {
        toPage(dir){
            if(dir==="lo"){
                // 调用组件的方法 selectMember 并传值
                this.$refs.apptable.selectMember(this.params)
            }else{

            }
        }
    }
}
</script>

B组件

<template>
    <div class="app-table-main">
      <el-table :data="tableData" class="data_table" id="data_table">
      <el-table-column prop="id" label="编号" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="state" label="状态"></el-table-column>
      <el-table-column prop="date" label="录入时间"></el-table-column>
      <el-table-column label="操作">
          <el-button type="primary" @click="updateMember()">修改</el-button>
          <el-button type="warning" @click="deleteMember()">删除</el-button>
      </el-table-column>
    </el-table>
  </div>
</template>
<script type="text/ecmascript-6">
import {selectMember }from '@/api/member'

const member = {
  data(){
    return {
      tableData:[{
          id: '2016001',
          name: '小明',
          state: '这是第一条数据'
        }]
    }
  },
  methods:{
    selectMember(dir){
      selectMember(dir).then(response =>{
        //用this即可修改
        this.tableData = response.data.contentList
      })
    }
  }
}
export default member
</script>

说一下遇到的坑：

1.A页面要引入B组件并给B组件一个ref ==>   <app-table ref="apptable"></app-table>

2.A方法中调用 this.$refs.apptable.selectMember 其中 apptable时1步骤设置的 selectMember是B组件的方法

3.在B方法中可以直接使用this设置data