Vue 3调用createApp创建的应用实例方法及获取数据报错如何解决

核心错误原因 #

• 错误1、2的根因：Vue.createApp() 返回的是Vue应用实例，你定义的showData方法、productList数据都挂载在根组件实例上，而非应用实例上，直接通过应用实例products调用自然会报方法不存在、属性undefined。
• 错误3的根因：
  1. 子组件注册时机错误：你先执行了mount挂载应用，之后才注册product组件，挂载阶段组件未注册会报错；
  2. 子组件初始化时直接访问空数组的第0项：根组件初始productList是空数组，子组件data初始化时直接取productList[0]['sku']必然触发undefined报错；
  3. 应用实例不存储根组件data：你直接从应用实例products上取productList本身就是错误写法，根组件数据不会直接挂载在应用实例上。
• 其他无效写法问题：
  • Vue3的createApp不需要传el配置项，后续调用mount指定挂载节点即可；
  • components配置项应为对象格式，你写的['sku']是无效写法；
  • 模板插值不需要加this，直接写变量名即可。

修复后代码 #

<script>
// 创建应用实例
const app = Vue.createApp ({
  data() {
    return {
      productList: [],
      product: {
        sku: 0,
        name: '',
        price: 0,
        attr: {
          size: 0,
          weight: 0,
          dimensions: {
            h: 0,
            w: 0,
            l: 0
          }
        }
      }
    }
  },
  methods:{
    addProduct(){
      // 解构赋值避免引用同一对象互相影响
      this.productList.push({...this.product})
      console.log(this.productList[0]['sku'])
    },
    showData(){
      return '1'
    }
  }
})

// 先注册组件，再挂载应用
app.component('product', {
  template: `
    <span>
    {{ sku }}<br>
    {{ name }}<br>
    {{ price }}<br>
    {{ size }}
    </span>
  ` ,
  data(){
    return {
      'name': 'name',
      'price': 100,
      'size': 10
    }
  },
  // 用计算属性+可选链避免空数组报错，通过$root访问根组件数据
  computed: {
    sku() {
      return this.$root.productList[0]?.sku || 0
    }
  }
})

// 挂载应用，拿到根组件实例
const vm = app.mount("#products")

// 通过根组件实例调用方法，可正常输出1
console.log(vm.showData())
</script>

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