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