1. 程式人生 > >vue 父元件呼叫子元件方法和子元件呼叫父元件方法

vue 父元件呼叫子元件方法和子元件呼叫父元件方法

子元件:

    methods:{
     
       //一開始載入基礎資訊資料
        _basicInfo(){
            let self = this;
            self.titleExplain=[];
            self.listContent=[];
            self.addres=[];
            self.UsingYear=[];
            self.build=[];
            self.Prison=[];
            self.numPrison=[];
            // let cityDate = self.$store.state.$vux.isCityCode;
            //     console.log(cityDate)
            let params ={sysUnit:this.$parent.sysUnit}
                    // console.log(params)
            self.$http.get(self.apis.cutData,{params}) .then(function(response) {
                             console.log(response)
                    let el = response.data.record[0];
                if(el != ''){
                    console.log(el)
                    //value.forEach(el =>{
                        self.titleExplain.push(el.JSMC);
                        // console.log(el.JSMC)
                        self.addres.push(el.DZ)
                        self.listContent.push(
                            {
                                title:'等級評定',
                                content:el.JSJB
                            },
                            {
                                title:'行政級別',
                                content:el.JSDJ
                            },
                            {
                                title:'值班電話',
                                content:el.ZBZD
                            },
                        );
                        self.UsingYear.push(el.JSSJ+'年建設',el.QYRQ+'年啟用')
                        //建築面積
                        self.build.push(el.ZJZMM)

                        //監區面積
                        self.Prison.push(el.JQMM)
                        //設計關押量
                        self.numPrison.push(
                            {
                                title:'設計關押量',
                                numbers:el.SJRL,
                            },
                                {
                                title:'本年度累計投送監獄人數',
                                numbers:el.TSJY,
                            },
                                {
                                title:'本年度累計取保候審人數',
                                numbers:el.QBHS,
                            },
                                {
                                title:'月均在所人數',
                                numbers:el.YJZSRS,
                            },
                            {
                                title:'監室數量',
                                numbers:el.JSS,
                            },
                            {
                                title:'詢問室數量',
                                numbers:el.XWS,
                            },
                            {
                                title:'律師會見數量',
                                numbers:el.LSHJS,
                            },
                        )
                    // })
                }else {
                        console.log(`空值`);
                }
            }).catch(err => console.log(err))
        },
    },
    mounted(){
        this._basicInfo();
    },

 父元件呼叫:

   <!-- 右側內容 -->
            <div class="conent-right" >

                <basic-info ref="aas"></basic-info>
                
            </div>
        </div>
<script>
    import basicInfo from './basicInformation'
    
export default {
    components:{
            basicInfo,
    },
    
     methods:{
          _basicInfo(){
            this.$refs.aas._basicInfo();
        },
    }


}

</script>

子元件呼叫:

<template>
    <div>
       
    </div>
</template>
<script>
export default {
    data(){
        return{
            
        }
    },
    methods:{
       returnData(e){//點選確定
     
          this.$parent._basicInfo();

        }
    }
}
</script>