Question

假设我有一个组件（单个文件组件）：

// Cat.vue
export default {
    data() {
        return {
            actionsPredefined: {
                eat () => (console.log('eat')),
                purr () => (console.log('purr')),
                meow () => (console.log('meow')),
            }
        }
    }
}

扩展名：

// Lion.vue
export default {
    extends: Cat,

    data() {
        return {
            actions: {
                eat: this.actionsPredefined.eat, // is undefined - why?
                purr: this.actionsPredefined.purr, // is undefined - why?
                roar () => (console.log('roar'))
            }
        }
    }
}

现在当我使用Lion.vue时，我得到了：

[Vue警告]：data（）出错：“TypeError：无法读取属性'吃'的未定义“

所以在Lion.vue中看起来this.actionsPredefined未定义。

这里选择合并actionsPredefined扩展组件（Cat.vue）与actions扩展组件（Lion.vue）的正确方法是什么？

在Lion.vue中，当我将actions从data移到computed时，Vue知道this.actionsPredefined是什么，但我无法将其移至computed（因为我需要能够通过其他方法更改actions并更改计算值...显然违背了使用计算值的想法，并且不起作用。）

我还可以在actions数据中设置Lion.vue为空，并且只在predefinedActions挂钩中使用created()填充它们并且它会起作用，但不知何故它感觉不像正确的方法。

Answer 1

我已经做了自己的测试，这就是我找到的

如果不在子类上创建data对象，则扩展可以正常工作，即：

//Lion
<script>
import Cat from './cat';

export default {
  extends: Cat,
  created() {
    this.actionsPredefined.purr(); //this prints purr
  }
}

</script>

如果将data及其继承的属性定义为箭头函数，它也可以正常工作，即：

<script>
import Cat from './cat';

export default {
  extends: Cat,
  data() {
    return {
      actions: {
        eat: () => this.actionsPredefined.eat(), 
        purr: () => this.actionsPredefined.purr(),
        roar: (console.log('roar'))
      }
    }
  },
  created() {
    this.actions.eat(); // eat
    this.actions.purr(); // purr
    this.actions.roar; // roar
  }
}

</script>

Cat组件：

<script>
  export default {
    data() {
      return {
        actionsPredefined: {
          eat: () => (console.log('eat')),
          purr: () => (console.log('purr')),
          meow: () => (console.log('meow')),
        }
      }
    }
  }
</script>

扩展组件的数据在扩展组件的数据中使用时未定义

1 个答案: