时间戳

首页 > 解决方案 > 调用基础组件的方法/功能

javascript - 调用基础组件的方法/功能

问题描述

有Base.vue

<template><div>{{ name }}</div></template>
<script>
  export default {
    data() {
      return {name: 'Example Component'};
    }
  };
</script>

并且Extended.vue：

<script>
  import Base from './Base.vue';
  export default {
    extends: Base,
    data() {
      return {name: 'Extended Example Component'};
    }
  };
</script>

是否可以data从基础重用而不是硬编码Extended Example Component？某种super来自OOP的东西？寻找涉及诸如mount, methods,computed等内容的通用解决方案。

更新

使用 OOP 时，我们使用这种方法（Python 示例）：

class Base:
   def __init__(self):
       self.name = 'Example Component'


class Extended(Base):
   def __init__(self):
       super().__init__()
       self.name = f'Extended {self.name}'

这样我们就可以重用self.name字段。

标签： javascriptvue.jsvuejs2modulevue-component

解决方案

extends并以指定的方式mixins合并选项，这是继承组件功能的官方方式。它们不提供对继承的完全控制。

对于可能在组件定义（Base和Extended）之间更改的静态数据，通常使用自定义选项：

export default {
  myName: 'Component',
  data() {
    return { name: this.$options.myName };
  }
}

和

export default {
  extends: Base,
  myName: `Extended ${Base.options.myName}`
}

请注意，这name是现有的 Vue 选项，不应用于任意值。

任何可重用的函数都可以从组件定义中提取到单独的导出中。

对于无法修改的现有组件，data并且可以在可能的情况下访问其他基本组件属性：

  data() {
    let name;

    name = this.$data.name;
    // or
    name = Base.options.data.call(this).name;

    return { name: `Extended ${name}` };
  }

这种方法不是面向未来的，并且与组合 API 不兼容，因为data等之间没有明确的区别，并且this在 setup 函数中不可用。可以使用实例访问，getCurrentInstance但它是内部 API，并且可以更改，恕不另行通知。

推荐阅读