【问题标题】:How to access function inside methods of mixin from component lifecycle method in Vue.js如何从 Vue.js 中的组件生命周期方法访问 mixin 方法中的函数
【发布时间】:2018-03-06 21:38:55
【问题描述】:

这是一个例子:

mixin.js

export default {
    methods : {
        aFunction() { // Some functionality here }
    }
}

组件.vue

import mixin from './mixin'
export default {
    mixins : [ mixin ]
    created() {
        // Call aFunction defined in the mixin here
    }
}

我想从组件内的 created() 生命周期方法访问 mixin 方法内定义的 aFunction。

【问题讨论】:

    标签: javascript ecmascript-6 vue.js vuejs2 mixins


    【解决方案1】:

    mixin 方法与组件的当前实例合并,所以它只是:

    created(){
      this.aFunction()
    }
    

    这是一个例子。

    console.clear()
    
    const mixin = {
      methods:{
        aFunction(){
          console.log("called aFunction")
        }
      }
    }
    
    new Vue({
      mixins:[mixin],
      created(){
        this.aFunction()
      }
    })
    <script src="https://unpkg.com/vue@2.4.2"></script>

    【讨论】:

    • 由于某种原因该函数被调用了 3 次?
    • @gaurav4sarma 在哪里?在这里它被调用一次。如果组件被多次创建,则可能在您的代码中。
    • 是的,可能就是这样。我的意思是,如何构建流程以使其仅被调用一次有没有办法让它只调用一次,因为它会调用 API 来获取数据
    • @gaurav4sarma 我敢肯定有几种方法,但没有代码很难猜到。我建议您针对特定结构提出不同的问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-11-04
    • 1970-01-01
    • 2019-06-03
    • 1970-01-01
    • 2018-04-27
    • 1970-01-01
    • 2019-02-22
    相关资源
    最近更新 更多