Vue 3 + TypeScript + setup 语法糖，实现动态计算宽度，根据不同屏幕分辨率导入不同组件

 

 

 

 动态组件 ：  <component :is="aboutUsComponent"></component>

  <div class="home-pages-second">
      <component :is="aboutUsComponent"></component>
    </div>

 

正常来说语法糖中不需要在导出组件，如果不导出页面不显示，不明白原因 

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from 'vue';
import AboutUs from './components/AboutUs.vue'
import AboutUs2 from './components/AboutUs2.vue'

// 动态计算宽度 当屏幕分辨率 =< 430px时候使用其他组件
const screenWidth = ref(window.innerWidth);
// const firstHeight = ref('100px');

const handleResize = () => {
  screenWidth.value = window.innerWidth;

};
//获取宽度小于或等于768分辨率 ，
const isSmallScreen = computed(() => {
  return screenWidth.value <= 768;
});
//分辨率小于或等于768时，引用组件 AboutUs2，否则AboutUs
const aboutUsComponent = computed(() => {
  return isSmallScreen.value ? 'AboutUs2' : 'AboutUs';
});

onMounted(() => {

  //动态计算宽，调用handleResize方法
  window.addEventListener('resize', handleResize);
});

</script>
//组件导出，当前页面使用
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  components: {
    AboutUs2,
    AboutUs,
   
  },
});
</script>