使用场景
=======
在Vue3中，当需要2个或者多个组件需要使用一个共同的变量时，比如在以一个页面中通过导航栏的一个按钮控制一个侧边栏缩放的功能时，需要一个变量记录这个侧边栏的状态，定义一个menuVisible记录这个值，但是导航栏和侧边栏不能将这个变量当作自己的内部数据，这是需要一个父组件提供这个值，然后导航栏要接受这个值，通过点击事件去通知父组件改变这个值，然后将这个值传递给侧边栏，最后由侧边栏去控制侧边栏的缩放
首先在父组件APP中定义这个值
const menuVisible = ref(width > 500)//当页面小于500时，侧边栏可以缩放provide('menuVisible', menuVisible) //set
然后分别在导航栏和侧边栏接受这个值
//导航栏const menuVisible = inject<Ref<boolean>>("menuVisible") //getconst toggleMenu = () => { menuVisible.value = !menuVisible.value}
//侧边栏setup() { const menuVisible = inject<Ref<boolean>>('menuVisible'); // get return {menuVisible}; },
