Vue3 子页面操控父页面显示隐藏：Provide/Inject 实现

在 Vue 3 中，可以使用 Provide/Inject 来实现子页面操控父页面的显示与隐藏。\n\n在父组件中，使用provide提供一个方法或者状态给子组件：\njavascript\nimport { provide, ref } from 'vue'\n\nexport default {\n setup() {\n const isShow = ref(false)\n\n const toggleShow = () => {\n isShow.value = !isShow.value\n }\n\n provide('toggleShow', toggleShow)\n\n return {\n isShow\n }\n }\n}\n\n\n在子组件中，使用inject来接收父组件提供的方法或者状态：\njavascript\nimport { inject } from 'vue'\n\nexport default {\n setup() {\n const toggleShow = inject('toggleShow')\n\n const saveData = () => {\n // 保存成功后调用父组件的方法\n toggleShow()\n }\n\n return {\n saveData\n }\n }\n}\n\n\n这样，在子组件中调用saveData方法时，就可以操控父组件的显示与隐藏。