Javascript 修改扩展Vue组件的已安装（）挂钩

我正在构建的系统是基于Nuxt的。 我使用插件技术创建了一些全局组件，其中导入并扩展了第三方npm包中的其他组件，因为我不想修改原始组件。 以下是后者的简化源代码：

// simplified version of the component from 3-rd party npm package
<script>
  import LibObj from 'someJSLib'

  export default {
    data() {
      return {
        dataField: null,
      }
    },
    mounted() {
      let that = this
      let initFunc = function (initParam) {

        let actionParam = function (initParam) {
          /* some local generic js code consuming initParam and producing value*/
          return value
        }

        let actionFunc = function (actionParam) {
          actionObj = new LibObj()
          actionObj.listen('event', function(){})
          actionObj.init()
          that.dataField = actionObj // this object reference is "exported" to vue component's data field
        };
        // that.actionFunc = actionFunc // this line of code is absent but I would like have it here


        let condition = function () {/* some local generic js code */}
        if (condition) {
          actionFunc(condition.id);
        }

        /* some more of local generic js code */

      };

      initFunc(cssSelectorString);

    },
  }
</script>

问题是原始组件的所有逻辑都在“安装”挂钩中实现。 在我自己的组件中，我确实觉得缺少对

actionFunc

作为组件数据字段的引用。为此，我只想添加

that.actionFunc=actionFunc

。 我已经尝试过扩展“mounted”hook，并为赋值的“intercept”过程添加一些逻辑，但是没有机会访问这里定义的任何函数的作用域

---

我还可以采取哪些步骤来实现这样的代码注入，以避免愚蠢地将所有代码复制到我自己的组件？

您可以将

actionFunc

移动到

方法

对象，然后无需分配它。在initFunc中，您只需调用

this.actionFunc（）

。通常，将所有函数都隐藏在

mounted（）

lifecyclehook中不是一个好主意。相反，您创建的方法由钩子调用。@Terry是的，我知道<代码>方法：{}这是vue组件的使用方式。但是我上面的代码不是我自己的。它来自我正在导入的第三方组件，并试图以某种方式集成到我的组件（而不是通过覆盖源代码）。编辑原始帖子以澄清一点^。。。¯\_(ツ)_/¨使用组件无法访问挂载挂钩中定义的功能，因此您实际上无能为力，除非（1）您自己手动修改第三方文件，或（2）在该项目上创建PR（如果存在）要对组件的API提出改进建议，您可以将

actionFunc

移动到

methods

对象，然后无需分配它。在initFunc中，您只需调用

this.actionFunc（）

。将所有函数都存储在

mounted（）中通常不是一个好主意

lifecycle钩子。相反，您创建的方法由钩子调用。@Terry是的，我知道。

methods:{}

这是vue组件的使用方式。但我上面的代码不是我自己的。它来自第三方组件，我正在导入并试图以某种方式集成到我的组件中（而不是通过覆盖源代码）。编辑原始帖子以澄清一点^那么听起来像是第三方提供商的糟糕组件设计…“”\_(ツ)_/¨使用组件无法访问挂载挂钩中定义的功能，因此您实际上无能为力，除非（1）您自己手动修改第三方文件，或（2）在该项目上创建PR（如果存在）以建议改进组件的API

// simplified version of the file where I register and extend the component above^
// no the logic doing any valuable stuff but rather demonstration of the framework of intentions
import Vue from "vue";
import ExternalComponent from 'ExternalNPMPackage';

Vue.component("ExtendedComponent", {
  extends: ExternalComponent,
  methods: {
    myMethod: function() {
      /* some logic somehow interacting with the scopes of the functions declared in the ExternalComponent */
    }
  },
  created: function() {
    console.log("created() in extended component");
    // this function is called before the code in the mounted() hook of ExternalComponent
  },
  mounted: function() {
    console.log("mounted() in extended component");
    // this function is called after the code in the mounted() hook of ExternalComponent
  },
});