VUE 子组件调用父组件的方法

改了一个组件，组件里有些按钮需要调用方法，之前没有遇到过，都是对原本的element-ui的控件做二次封装，一般是在组件最外层加上@input @change 之类，但是这次是内部的按钮事件，就懵逼了。

研究很久，才发现可以在父组件里把方法当做子组件的参数传递进来。

子组件：

<template>
  <el-table ref="subTable" :data="formatData" :row-key="handleRowKey" :default-expand-all="expandAll" v-bind="$attrs"  @row-click="rowClick" @selection-change="handleSelectionChange">
    <el-table-column v-if="columns.length===0" width="150">
      <template slot-scope="scope">
        {{scope.$index}}
      </template>
    </el-table-column>
    <el-table-column v-else v-for="(column, index) in columns" :key="column.value" :label="column.text" :width="column.width" :add="column.add" :update="column.update">
      <template slot-scope="scope">
          <template>
              <span v-if="index === 0 && scope.row.parentId">
                  <el-radio v-model="radioCheck" :label="scope.row.id">{{scope.row[column.value] || scope.row[column.name]}}</el-radio>
              </span>
              <span v-else-if="index === 1 && scope.row.id">
                  <el-button v-if="scope.row.add===true" ref="buttoncreate" size="mini" type="primary" icon="el-icon-plus" circle @click="handlePage(scope.row,'create')"></el-button>
                  <el-button v-if="scope.row.update===true" ref="buttonupdate" size="mini" type="success" icon="el-icon-edit" circle @click="handlePage(scope.row,'update')"></el-button>
                  <el-button v-if="scope.row.delete===true" ref="buttondelete" size="mini" type="danger" icon="el-icon-delete" circle @click="handlePage(scope.row,'delete')"></el-button>
              </span>
              <span v-else-if="index === 2 && scope.row.orderNum">
                  <el-input-number v-model="scope.row.orderNum" placeholder="请输入排序" size="mini" :min="0" @change="changeOrderNum(scope.row)" style="width: 120px;"></el-input-number>
              </span>
              <template v-else>
                  {{scope.row[column.value] || scope.row[column.name]}}
              </template>
          </template>
      </template>
    </el-table-column>
    <slot></slot>
  </el-table>
</template>

<script>
    import treeToArray from './eval'
    export default {
        name: 'treeTable',
        data() {
            return {
                radioCheck: {}
            }
        },
        props: {
            data: {
                type: [Array, Object],
                required: true
            },
            columns: {
                type: Array,
                default: () => []
            },
            evalFunc: Function,
            evalArgs: Array,
            expandAll: {
                type: Boolean,
                default: true
            },
            changeOrderNum: {
                type: Function,
                default: null
            },
            handlePage: {
                type: Function,
                default: null
            }
        },
        computed: {
            // 格式化数据源
            formatData: function () {
                let tmp
                if (!Array.isArray(this.data)) {
                    tmp = [this.data]
                } else {
                    tmp = this.data
                }
                const func = this.evalFunc || treeToArray
                const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
                return func.apply(null, args)
            }
        },
        methods: {
            rowClick(row) {
                this.radioCheck = row.id
                this.$refs.subTable.clearSelection()
                this.$refs.subTable.toggleRowSelection(row)
                this.$emit('row-click', row)
            },
            handleSelectionChange(val) {
                this.$emit('selection-change', val)
            },

            handleRowKey(row) {
                return row.id
            }
        }
    }
</script>

用到的参数是：

changeOrderNum: {
                type: Function,
                default: null
            },
            handlePage: {
                type: Function,
                default: null
            }

 

父组件上的methods

//排序修改
            changeOrderNum(row) {
                let obj = { id: row.id, orderNum:row.orderNum }
                ......
            },
            //添加修改按钮事件
            handlePage(row, type) {
                if (type === 'create') {
                    this.handleAddMenu(row)
                }
                else if (type === 'update') {
                    this.handleEditMenu(row)
                }
                else if (type === 'delete') {
                    this.handleDelMenus(row)
                }
            },

 

调用的时候用v-bind来传参

<tree-table highlight-current-row :data="areaTreeRoot" :columns="columns" :expandAll="false" border :changeOrderNum="changeOrderNum" :handlePage="handlePage">
</tree-table>