组件内 Mixin 的调用方法(Vuejs) [英] Call Methods of Mixin within Component (Vuejs)

问题描述

我无法从组件调用 mixin 方法，出现此错误 this.hello is not a function.

我可以从 Vue 实例调用 hello() 但我不能在组件中调用它.

怎么了?！

<cmp></cmp>

const mixin = {方法: {你好() {返回'你好世界！';}},创建(){console.log('混合创建！');},};const cmp = {创建(){console.log('来自 Cmp:', this.hello());},};新的 Vue({成分: {中压},el: '#vue-app',混合:[混合]，创建(){console.log('From VM:', this.hello());},});

https://jsfiddle.net/ar464soq/

解决方案

好吧，看来我必须在整个 Component 实例中加载 Mixin，而不是从 Vue 父实例 :)

I can't call mixin method from the component, I get this error this.hello is not a function.

I can call hello() from Vue instance but I can't call it within the component.

What's a matter?!

<div id='vue-app'>
  <cmp></cmp>
</div>

const mixin = {
  methods: {
    hello() {
      return 'Hello World!';
    }
  },
  created() {
    console.log('Mixin Created!');
  },
};

const cmp = {
  created() {
    console.log('From Cmp:', this.hello());
  },
};

new Vue({
  components: {
    cmp
  },
  el: '#vue-app',
  mixins: [mixin],
  created() {
    console.log('From VM:', this.hello());
  },
});

https://jsfiddle.net/ar464soq/

解决方案

Well, it seems I have to load the Mixin throughout of the Component instance, not from Vue parent instance :)

这篇关于组件内 Mixin 的调用方法(Vuejs)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！