由于用的vue2.7版本,但用了vue3 setup的語法;
注意:是vue2的template結構,vue3的setup語法;非這種情況需要舉一反三。
處理方案:
1、對router-view加上ref
- template修改
直接對router-view加上ref,
<router-view ref="child" > </router-view>
- script修改
// add方法function add(){// 成功后調用子組件(此)proxy.$refs.child.refreshList}
2、子組件暴漏方法
注意:一定要用【defineExpose】暴漏給父級,否則父級看不到這個方法
script內:
function refreshList() {
}// 暴漏給父組件
defineExpose({refreshList
})
其他場景的:
3、純vue2的
應該this.$refs.child.refreshList就成,
因為子組件用的是 methods定義的
4、純vue3的
- 父組件template修改
<template><router-view v-slot="{ Component }"><component ref="child" :is="Component" /></router-view>
</template>
- 父組件script修改
// add方法function add(){// 成功后調用子組件(此)proxy.$refs.child.refreshList}
- 子組件script修改
注意:一定要用【defineExpose】暴漏給父級,否則父級看不到這個方法
function refreshList() {
}
// 暴漏給父組件
defineExpose({refreshList
})