天天看點

VUE 父元件調用子元件函數的方法重點

前端頁面需要父元件和子元件同時加載并且子元件需要用到父元件的參數才能出資料

在父元件中引入、聲明子元件

js:
引入:import iousPartH from './../../iousPartH
并且需要在components 聲明引用的子元件才能使用:
components: {
		iousPartH
},
           

在父元件中定義初始化函數

methods: {
        //初始化
        init() {
            util.ajax.get('/process/getInfo', {
                params: {
                    Id:Id,
                    instanceId:this.form.instanceId
                }
            }).then(res => {
                this.form.Id = res.data.Id;
                this.$refs['iousPartH'].getBaseInfo(this.form.Id);  -- 在父元件中調用子元件的函數并使用父元件中得到資料作為參數
            }).catch(err => {
                console.log("主表單 error", err);
            });
        },
           

在父元件mounted中調用初始化函數

mounted() {
        this.init();
    },
           

重點

this.$refs['iousPartH'].getBaseInfo(this.form.Id);  -- 在父元件中調用子元件的函數并使用父元件中得到資料作為參數
           

在加載完父元件的函數之後同時調用子元件的函數

學到了!

繼續閱讀