vue3 动态新增elment 组件元素

Vue 3 提供了更加灵活的方式来动态添加组件元素。你可以利用 JavaScript 的动态特性，结合 Vue 的响应式系统，来实现动态组件的创建和挂载。下面是一个基本的示例：

首先，你可以使用 `Vue.createApp` 创建一个 Vue 应用实例，然后使用 `app.mount` 方法挂载到某个 DOM 元素上。

const app = Vue.createApp({
  // 应用选项
});
app.mount('#app');

为了动态添加组件，你可以使用 `app.component` 方法来注册全局组件，或者使用组件的 `is` 属性来动态渲染不同的组件。以下是如何动态添加组件的步骤：

1. 定义组件。
2. 使用 `app.component` 方法注册组件（可选，如果需要全局注册）。
3. 在模板中使用 `<component :is="currentComponent">` 来根据数据动态选择渲染哪个组件。

下面是一个示例代码：

const app = Vue.createApp({
  data() {
    return {
      currentComponent: 'component-a'
    };
  }
});

// 定义组件
app.component('component-a', {
  template: '<div>我是组件A</div>'
});
app.component('component-b', {
  template: '<div>我是组件B</div>'
});

app.mount('#app');

在模板中使用：

<div id="app">
  <button @click="currentComponent = 'component-a'">显示组件A</button>
  <button @click="currentComponent = 'component-b'">显示组件B</button>
  <component :is="currentComponent"></component>
</div>

在上面的代码中，点击不同的按钮会根据 `currentComponent` 的值动态切换显示不同的组件。