调用基础组件的方法/功能答案

【问题标题】：Calling base component's methods/features调用基础组件的方法/功能
【发布时间】：2021-05-05 14:12:54
【问题描述】：

有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？来自 OOP 的某种super？寻找涉及 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 字段。

【问题讨论】：

请澄清您的期望。 而不是硬编码扩展示例组件 - 但它是硬编码的，因为它应该与 Base 不同，不是吗？ extends 和 mixins 合并数据和其他选项，这就是他们的目的
@EstusFlask 所以你的意思是在这个用例中扩展不是最好的选择？那么也许有任何替代方法建议？
如果不覆盖child中的“name”，那么访问“name”会得到父值，即“Example Component”，这就是我们所期望的。所以我看不出你在问什么。
@jaudo 这是一个确切的问题：如何在Extended 组件中引用Base 组件的name 值？请注意name 是data 的一个字段，所以我更一般地询问data。我也对mounted、computed、methods等其他功能感兴趣。
使用 this.name 将访问 Base 值。除非它在扩展中被覆盖。在这种情况下，基本值是不可达到的（就像我所知道的所有 OOP 语言一样）

标签： javascript vue.js vuejs2 module vue-component

【解决方案1】：

extends和mixins合并选项in a specified way，这是官方继承组件功能的方式。它们不提供对继承的完全控制。

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

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

和

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

请注意，name 是 existing Vue option，不应用于任意值。

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

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

  data() {
    let name;

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

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

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

【讨论】：

【解决方案2】：

数据对象是单个组件的一种状态，因此组件内部的数据对象只能在该组件中访问，而不能从外部或其他组件访问。

对于您的特定要求，您可以使用 Vuex。它可以帮助您访问多个组件中的状态。只需在 vuex 存储中定义一个状态，然后在组件中访问该状态。

如果你不想使用Vuex，那么另一个简单的解决方案是将数据存储在localStorage中，然后在多个组件中访问数据。

【讨论】：

不幸的是，将数据保存在本地存储中不是一种选择，因为在我的现实生活场景中，我试图覆盖外部组件。

【解决方案3】：

您可以从子组件访问您的数据。你可以通过 this.$parent.nameOfTheDataYouHave 做到这一点。
这个cheatsheet 可以帮助您了解组件解剖和生命周期挂钩（安装、创建等）的基础知识。
最后this是双向绑定数据（父子）的正确方式。

【讨论】：

$parent 指的是父组件，而不是基础组件。这不是嵌套问题，而是关于组件继承。
对不起，我的意思是子组件。我编辑了原件。如果我理解正确，mixins 会做你想做的事。您可以创建具有完整或部分组件解剖结构的 mixin，并在您想要的任何组件中使用它，因为它扩展了您导入的 mixin。