动态组件-component

效果

代码结构

代码

app.vue

<template>
  <div id="nav">
    <h1>动态组件</h1>
    <component :is="news"></component>
  </div>
</template>
​
<script setup>
// import NewsImage from './components/NewsImage.vue'
import NewsText from './components/NewsText.vue'
// import NewsVideo from './components/NewsVideo.vue'
​
import { ref } from '@vue/reactivity'
​
const news = ref(NewsText)
</script>
​
<style>
</style>