Vue2之父与子组件互相传参和方法调用

1、父组件通过ref调用子组件方法

父组件【index.vue】
<SearchTool ref="searchToolRef"/>

methods: {
    // ...

    /**
     * 刷新任务数据
     */
    reflashTaskTable() {
        // 父组件调用子组件【searchTool.vue】的onSubmit方法
        this.$refs['searchToolRef'].onSubmit()
    }
}

子组件【searchTool.vue】，别名为【searchToolRef】
methods: {
    // ...

    /**
     * 提交搜索框的表单数据，执行查询
     */
    onSubmit() {
        // ...
    }
}

2、子组件通过props调用父组件方法

父组件【index.vue】
<SearchTool :reflashTaskTable="reflashTaskTable"/>

methods: {
    // ...

    /**
     * 刷新任务数据
     */
    reflashTaskTable() {
        // ...
    },
}


子组件【searchTool.vue】，别名为【searchToolRef】
props: ["reflashTaskTable"]

methods: {
    // ...

    /**
     * 刷新任务数据句柄
     */
    handleReflashTaskTable() {
        // ...
        this.reflashTaskTable();
    },
}

3、父组件通过:param传参给子组件

父组件【index.vue】
 <SearchTool :levelList="levelList"/>

 data: () => ({
    levelList: ['Lv1', 'Lv2', 'Lv3', 'Lv4', 'Lv5']
 })

子组件【searchTool.vue】，别名为【searchToolRef】
props: ["levelList"]

watch: {
    levelList: function(newVal, oldVal) {
        console.log(newVal);
    }
}

4、子组件通过emit传参给父组件

子组件【searchTool.vue】，别名为【searchToolRef】
methods: {
    // ...

    /**
     * 删除任务
     */
    deleteTaskByIds() {
        // ...
        this.$emit("handleDeleteTaskByIds", "181191");
    }
}

父组件【index.vue】
<SearchTool @handleDeleteTaskByIds="handleDeleteTaskByIds"/>

methods: {
    // ...

    /**
     * 删除任务句柄
     */
    handleDeleteTaskByIds(val) {
        // ...
        console.log(val);// 181191
    },
}