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