Vue3中替代Vue2 extend的方案咨询：createApp/defineComponent无效

直接用 Vue3 的 createApp 就能替代你原来 Vue2 中 Vue.extend 的用法，以下是适配后的代码：

import { createApp } from 'vue';
// 假设 VueGlobalCart 是已经适配 Vue3 的组件（若未适配，需先迁移组件逻辑）
import VueGlobalCart from './VueGlobalCart.vue';

// 创建应用实例并挂载到目标元素，同时传递初始属性
this.vueMiniCart = createApp(VueGlobalCart, {
  jsonUrl: this.props.json,
  cartAriaText: this.props.cartAriaText
}).mount(this.selector);

关键说明： #

• Vue3 移除了 Vue.extend，改用 createApp 直接创建组件实例，第二个参数用来传递组件的 props（对应你原来代码中传入的 data 数据，Vue3 更推荐用 props 做外部数据传递）。
• 组件内部需要提前声明对应的 props 来接收这些值，比如在 VueGlobalCart 中：

  import { defineComponent } from 'vue';
  
  export default defineComponent({
    props: {
      jsonUrl: String,
      cartAriaText: String
    },
    // 组件其他逻辑...
  });
  

• 若后续需要销毁该组件实例，调用 this.vueMiniCart.unmount() 即可，对应 Vue2 的 $destroy 方法。
• 你原来代码中的 Data 是拼写错误，Vue2 中应该是小写的 data；Vue3 中不再通过实例化参数传入内部 data，组件的内部数据需在组件内通过 data() 函数定义。

内容的提问来源于stack exchange，提问作者SKU