Vue组件继承：子组件data中父组件data属性未定义的解决问询

问题根源 #

你遇到的this.actionsPredefined为undefined的问题，本质是Vue组件初始化的时机问题：
当子组件的data函数执行时，父组件通过extends传入的data还未被合并到当前组件的this实例中——此时this只能访问到子组件自身data函数返回的属性，父组件的data要在data函数执行完成后才会被合并进来，所以直接访问自然拿不到。

最优解决方案：用super.data()获取父组件data #

Vue对extends继承的组件提供了super关键字，可以直接调用父组件的data方法拿到完整的父组件data对象，这样就能在子组件的data函数里直接完成属性合并，完全符合你的需求：

// Lion.vue
export default {
  extends: Cat,
  data() {
    // 调用父组件的data方法，拿到父组件的完整data对象
    const parentData = super.data()
    return {
      actions: {
        // 直接从父组件data中取预定义方法
        eat: parentData.actionsPredefined.eat,
        purr: parentData.actionsPredefined.purr,
        // 新增子组件自己的方法
        roar: () => console.log('roar')
      }
    }
  }
}

这个方案的优势：

• 不需要额外的生命周期钩子（比如created），直接在data里完成初始化，逻辑更紧凑
• 生成的actions是子组件自身的data属性，后续可以自由修改（比如this.actions.eat = () => console.log('Lion eats meat!')），完全满足你需要修改的需求

对之前尝试的补充说明 #

• 为什么computed可行但不适用？：computed的执行时机是在实例初始化完成后，此时父组件data已经合并到this，所以能访问到actionsPredefined，但computed是响应式依赖计算的，设计上不允许直接修改，强行修改也不会生效，所以不符合你的场景。
• created钩子方案的问题：虽然可行，但属于延后初始化，逻辑上不够直接，而且如果actions需要在模板渲染时就可用，可能会出现短暂的空值状态（虽然一般不会有问题，但确实不如直接在data里初始化优雅）

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