（二）父组件传递事件给子组件（通过localStorage方式）

1、需求

重点

 this.$refs.child.getAllTableData();
  <personnel-age v-if="personnelAge" ref="child"></personnel-age>

具体实现

//father.vue
<template>
    <!--<div>全局分析</div>-->
    <div class="personnelAge">
        <div>
            <Form ref="loginForm" :model="formIndex">
                <Row>
                    <Col span="6">
                        <FormItem label="时间">
                            <DatePicker v-model="formIndex.timearea" type="daterange" placement="bottom-end" placeholder="" style="width: 100%;"></DatePicker>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="分析类型">
                            <Select v-model="formIndex.anaType" style="" @on-change="changes">
                                <Option v-for="item in anaTypes" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="6">
                        <FormItem label="事故经损">
                            <Select v-model="formIndex.zongSun" style="">
                                <Option v-for="item in yugus" :value="item.id" :key="item.id">{{ item.name }}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col span="4">
                        <div style="display: inline-block;width: 10%;"></div>
                        <Button type="primary" style=""  v-on:click="getAllTableData">查询</Button>
                    </Col>
                </Row>
            </Form>
        </div>
        <div>
            <personnel-age v-if="personnelAge" ref="child"></personnel-age>
            <employee-entry v-if="employeeEntry" ref="child"></employee-entry>
            <multiple-people v-if="multiplePeople" ref="child"></multiple-people>
        </div>
    </div>
</template>

<script>
    import util from '@/libs/util.js';
    import  personnelAge from './personnelAge.vue'
    import  employeeEntry from './employeeEntryTime.vue'
    import  multiplePeople from './multiplePeople.vue'
    export default{
        data() {
            return {
                formIndex: {
                    timearea:'',
                    zongSun:'',
                    anaType:'',
                },
                fatherParams:{},
                anaTypes:[
                    {id:1,name:'肇事驾驶员年龄段'},
                    {id:2,name:'肇事驾驶员入职时间段'},
                    {id:3,name:'多发人员'},
                ],
                yugus: [{id:0,name:'全部'},{id:1,name:'上报事故'},{id:2,name:'考核事故'}],
                personnelAge:true,
                employeeEntry:false,
                multiplePeople:false,
            };
        },
        components: {
            personnelAge,
            employeeEntry,
            multiplePeople,
        },
        mounted:function () {
            this.changes();
            this.getAllTableData();
        },
        methods:{
            getAllTableData: function () {
                //
                let start_date = this.formIndex.timearea[0];
                let end_date = this.formIndex.timearea[1];
                if(start_date === "" && end_date === ""){
                    let nowDate = new Date();
                    if(nowDate.getDate < 10 ){
                        end_date =  util.transferMonthDay( nowDate );
                    }else{
                        end_date = util.transferDate( nowDate );
                    }
                    let last_date = new Date( end_date );
                    let getOldYear = last_date.getFullYear();
                    let getOldMonth= (last_date.getMonth() + 1 );
                    start_date = getOldYear + '-' + getOldMonth + '-'+'01';
                }
                console.log('开始时间~~'+start_date)
                this.formIndex.timearea = [start_date , end_date];
                localStorage.setItem(
                    "start_date1",start_date
                );
                localStorage.setItem(
                    "end_date1",end_date
                );
                localStorage.setItem(
                    "zongSun1", this.formIndex.zongSun
                );
                this.$refs.child.getAllTableData();
            },
            changes() {
                let anaType =  this.formIndex.anaType;
                if( anaType !== '' ){
                    if(anaType === 1){
                        this.personnelAge = true;
                        this.employeeEntry = false;
                        this.multiplePeople = false;

                    }else if(anaType === 2){
                        this.personnelAge = false;
                        this.employeeEntry = true;
                        this.multiplePeople = false;
                    }else {
                        this.personnelAge = false;
                        this.employeeEntry = false;
                        this.multiplePeople = true;
                    }
                }else {
                    this.formIndex.anaType = 1;
                    this.personnelAge = true;
                    this.employeeEntry = false;
                    this.multiplePeople = false;
                }
            }
        }
    }
</script>

<style lang="less">

</style>