VUEJS入坑日记.3-子组件调用父组件方法

在子组件中通过$emit()调用父组件的方法。

先看官方$emit()原型：vm.$emit( eventName, […args] )

vm.$emit( eventName, […args] )
参数：
{string} eventName
[…args]
触发当前实例上的事件。附加参数都会传给监听器回调。

我们的做法是，把子组件的$emit绑定到父组件的eventName事件上，父组件监听eventName，当它被触发时，会调用父组件对应的方法。
父组件：

<template>
<wacke-table :formItem="formItem" @onSubmit="parentFun"></wacke-table>
</template>

<script>
export default {
        name: 'formcreate',
        components: {
            wackeTable
        },
        data(){
          return{
              formItem:[]
          }
        },
        mounted () {
        },
        methods:{
            parentFun(msg) {
                this.$Message.success(msg);
            }
        }
    };
</script>

在父组件上绑定了onSubmit方法，在子组件中，用$emit()直接调用；
子组件：

<template>
        <Drawer title="新增-components" v-model="drawer1" width="40" :mask-closable="false" :styles="styles">
            <Form ref="formData" :model="formData"  :label-width="100">
                <Row v-for="(row,rowindex) in formData.items" :key="rowindex" >
                    <Col span="16" offset="2" >
                        <FormItem :prop="'items.' + rowindex + '.value'" :rules="{required: row.required , message: '这是必填项', trigger: 'blur'}" :label="row.title" >
                            <Input v-if="_findItemInArray(row.add,['text','textarea'])" :type="row.add" v-model="row.value" placeholder="请输入..."></Input>
                            <Select v-if="row.add=='select'" v-model="row.value" >
                                <Option v-for="(op,opindex) in row.items" :key="opindex" :value="op.value">{{op.label}}</Option>
                            </Select>
                            <DatePicker v-if="row.add=='date'" type="date" format="yyyy-MM-dd"  @on-change="row.value=$event" placeholder="-请选择-"></DatePicker>
                        </FormItem>
                    </Col>
                </Row>
            </Form>
            <div class="demo-drawer-footer">
                <Button style="margin-right: 8px" @click="drawer1 = false">取消</Button>
                <Button type="primary" @click="handleSubmit">确定</Button>
            </div>
        </Drawer>
        <!--#drawer-->
</template>
<script>
    export default {
        name: 'wacke-table',
        props:['formItem'],
        data() {
            return {
                // drawer
                styles: {
                    height: 'calc(100% - 55px)',
                    overflow: 'auto',
                    paddingBottom: '53px',
                    position: 'static'
                },

                drawer1:true,
                modal1:false,
                spinShow:true,

            }
        },
        computed: {
            formData: function () {
                var obj = new Object();
                obj.items = this.formItem;
                return obj;
            }
        },

        methods: {
            // item是否存在于array中
            _findItemInArray (item, array) {
                return array.indexOf(String(item)) < 0 ? false : true;
            },
            handleSubmit () {
                var formItem = new Object();
                this.formData.items.forEach(function (h,index) {
                    const key = h.key;
                    formItem[key] = h.value;
                });
                this.$emit('onSubmit',formItem);
            }
        },
        created() {

        },
        mounted () {

        }
    };
</script>

如上，子组件wacke-table的handleSubmit()方法中，将$emit绑定到父组件的onSubmit事件。这样，当父组件监听到子组件的handleSubmit方法被触发的时候，就会调父组件的parentFun方法了。