Vue 3 子页面操控父页面显示隐藏：provide 和 inject 的应用

在 Vue 3 中，可以使用/provide/和/inject/来实现子页面操控父页面的显示与隐藏。//n//n首先，在父组件中，使用/provide/提供一个方法来控制显示与隐藏：//njavascript//nimport { provide, ref } from 'vue';//n//nexport default {//n setup() {//n const isShown = ref(true); // 是否显示//n//n const toggleShow = () => {//n isShown.value = !isShown.value;//n };//n//n provide('toggleShow', toggleShow);//n//n return {//n isShown,//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 // 保存成功后调用toggleShow方法//n toggleShow();//n };//n//n return {//n saveData,//n };//n },//n};//n//n//n这样，在子组件中调用/saveData/方法后，会触发父组件中的/toggleShow/方法，从而控制父页面的显示与隐藏。