Inheritance Vue– ；在已创建的组件上自动运行功能

我正在将Vue CLI 3.x与TypeScript类（.tsx文件）一起使用

我想为我的所有视图实现权限处理

最简单的方案是：路由到组件X；有访问权限吗？停留没有许可吗？路由到默认页面

我已经实现了正确处理所有事情的逻辑，但我正在努力构建一个好的体系结构

现在，我将受保护的处理程序函数添加到Vue组件

ViewBase

，并且我的所有组件（也是视图）都继承该类，并在其

created（）

生命周期钩子中调用该函数。看起来是这样的：

import Vue from 'vue';
import Component from 'vue-class-component';

@Component
class ViewBase extends Vue {
  protected handleAccess() {
    // route here
  }
}

@Component
class MyView extends ViewBase {
  private created() {
    this.handleAccess();
  }
}

但是我不喜欢在我的每个组件中手动调用创建的钩子中的某些东西。我可以自动完成吗？

您可以使用（）

直接在mixin中的

创建的

钩子中定义句柄访问代码，并为所有视图组件包括（或在TypeScript中扩展）此mixin。钩子将合并到视图组件中，就像在视图组件中定义钩子一样

//mixin.ts
从“Vue”导入Vue
从“vue类组件”导入组件
//可以将mixin声明为与组件相同的样式。
@组成部分
导出默认类MyMixin扩展Vue{
创建（）{
//句柄访问代码
}
}
//my-view.ts
从“vue类组件”导入组件{mixins}
从“./mixin.ts”导入MyMixin
@组成部分
导出类MyView扩展mixin（MyMixin）{
}

非常好！虽然我似乎需要在mixin类中执行

created（）

hook

protected

，但我仍然能够在子组件中使用它。但这对我来说没什么大不了的。谢谢！