Vue 2 父页面调用子组件方法，并且传参。

父页面

<el-table :data="tableData">
	<el-table-column label="操作" prop="meter_warn">
		<el-button size="mini" @click="handEditnew(scope.row.station_id)">编辑</el-button>
	</el-table-column>
</el-table>
<!-- 子组件，通过ref 传递方法，然后同时传值 -->
<edit-new ref="child" :propEditNew=propEditNew></edit-new>
 

export default {
  name: 'power-station',
  data() {
    return {
      //表格数据
     tableData: [],
      // edit && new，传递的参数
      propEditNew: {
        show: false,
        station_id: ''
      }
    }
  },
  // 子组件注册
  components: {
    editNew
  },
  
  //编辑新增，提出子组件管理。
   handEditnew(row) {
      this.propEditNew.station_id = row
      this.propEditNew.show = true

      this.$nextTick(() => {
        this.$refs.child.getToEdit()
      }, 15)
    },

子组件

<!--电站管理，编辑查看详情&&新增查看详情-->
<template>
  <div>
    <el-dialog title="收货地址" :visible.sync="editNew.show">
      <el-form :model="form">
        <el-button @click="getToEdit">111</el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editNew.show = false">取 消</el-button>
        <el-button type="primary" @click="editNew.show = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>


</template>

<script>
import { getToEdit } from '@/api/user-management/power-station'

export default {
  name: 'editNew',
  data() {
    return {
      editNew: this.propEditNew,
    }
  },
  //传递过来的值
  props: ['propEditNew'],

  methods: {
   	// 父页面直接调用这个方法
    getToEdit() {
      getToEdit({
        station_id: this.editNew.station_id
      }).then(res => {
        console.log(res)
      })
    }
  }
}
</script>