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

之父与子组件互相传参和方法调用"/>

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},
}