vue3 中的ref nextTick

setup 是一个封闭的 其它组件如果想用到其内部函数 需要用defineExpose

父级组件用到子级组件的内部的函数时 子暴露 父用ref

nextTick 得import 并且是异步执行

<script setup>
import HotProduct from "../../components/HotProduct.vue";
import Map from "../../components/Map.vue";
import Rank from "../../components/Rank.vue";
import Seller from "../../components/Seller.vue";
import Stock from "../../components/Stock.vue";
import Trend from "../../components/Trend.vue";
import {reactive, ref,nextTick} from "vue";
const fullScreenStatus = reactive({
  trend:false,
  seller:false,
  map:false,
  rank:false,
  stock:false,
  hot:false,
})
const trend = ref(),map=ref(),stock=ref(),seller=ref(),rank=ref(),hot=ref()
async function changeSize(chartName){
  fullScreenStatus[chartName] = !fullScreenStatus[chartName];
//  思路很明白了 就是数据变了  组件的屏幕适配函数并么有变 父组件调用子组件的方法
  console.log(chartName)
  if (chartName === 'trend'){
    await nextTick()
    trend.value.screenAdapter()
  }else if(chartName ==='hot'){
    await nextTick()
    hot.value.screenAdapter()
  }else if(chartName ==='map'){
    await nextTick()
    map.value.screenAdapter()
  }else if(chartName ==='stock'){
    await nextTick()
    stock.value.screenAdapter()
  }else if(chartName ==='rank'){
    await nextTick()
    rank.value.screenAdapter()
  }else if(chartName ==='seller'){
    await nextTick()
    seller.value.screenAdapter()
  }

}

</script>