天天看点

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);  -- 在父组件中调用子组件的函数并使用父组件中得到数据作为参数
           

在加载完父组件的函数之后同时调用子组件的函数

学到了!

继续阅读