Как сделать методы вызова функции плагина Vue на связанном компоненте?

Question

Как сделать методы вызова функции плагина Vue на связанном компоненте?

1

Я хотел бы создать плагин Vue, который регистрирует глобальный компонент и позволяет использовать методы плагина (доступный глобально через this.$magic). Например:

ЦСИ/плагины/magic.js

import Magic from './Magic.vue';

export default {
  install(VueInstance) {
    console.log('Installing');

    VueInstance.component('magic', Magic);
    VueInstance.prototype.$magic = {
      increment() {
        // ???
      },
    };
  },
};

И в компоненте Magic.vue существует метод, который следует вызывать, когда разработчик вызывает this.$magic.increment(). Я не уверен, как это сделать, и документация Vue действительно не затрагивает эти детали.

ffxsam 16 сен. 2018, в 00:19

Источник

Теги:

javascript

vue.js

plugins

1 ответ

Ещё вопросы

darkylmnx · Accepted Answer · 2018-09-16T10-49-00.000Z

для статеров написание "VueInstance" неверно, потому что это функция класса Vue, которая передается вам, а не экземпляр Vue.

Теперь, чтобы ответить на ваш вопрос, который не совсем ясен для меня, я бы сказал, вам нужно использовать систему государственного управления.

Если я хорошо понимаю, вы хотите создать на прототипе Vue метод, который вызывает другую часть метода каждого экземпляра вашего компонента "Магия". (Почему я говорю каждый экземпляр? Поскольку вы не можете вызвать метод из вашего определения компонента, вы должны указать его для доступа к одному из его методов или данных).

Честно говоря, это кажется слишком сложным, но поскольку я не знаю, какова ваша конечная цель, вот некоторые подсказки:

Вы можете создать пустой экземпляр вашего компонента для доступа к его методам.

Импортировать магию из './Magic.vue';

const myMagic = new (Vue.extend(Magic));

export default {install (VueInstance) {console.log('Установка');
```
VueInstance.component('magic', Magic);
VueInstance.prototype.$magic = {
  increment() {
    myMagic.method()
  }
};
```
```
VueInstance.component('magic', Magic);
VueInstance.prototype.$magic = {
  increment() {
    myMagic.method()
  }
};
```
} }; }};

Теоретически все экземпляры вашего Magic-компонента будут иметь один и тот же метод, поэтому это работает, но это не изменит состояние всех ваших экземпляров, здесь вы просто имеете доступ к методу (поэтому я не вижу случая использования, сервис/полезность будет лучше, см. № 2)

Используйте общее состояние и общий метод, который импортирует ваш Magic компонент вместо того, чтобы пытаться использовать метод из вашего компонента Magic.

Shared.js

export const state = {
  somedata: 0
};

export const methods = {
  inc() {
    state.somedata++
  }
};

Magic.vue

import { state, methods}  from './Shared.js'

export default {
  data() {
    return {
      shared: state
    }
  },
  methods: {
    Something () {
      methods.inc();
    }
  }
};

Plugin.js

import { state, methods}  from './Shared.js'
import Magic from './Magic.vue';

export default {
  install(VueInstance) {
    console.log('Installing');

    VueInstance.component('magic', Magic);
    VueInstance.prototype.$magic = {
      increment() {
        methods.inc()
      }
    };
  }
};

В глобальном масштабе вы можете просто поделиться им таким образом (и это реактивно, потому что дало ссылку на объект на данные компонента Magic, которые будут ссылкой sae для каждого экземпляра, поэтому разделены).

Сделайте # 2, но используя vuex с состоянием и мутациями или действиями.

Заключительное примечание, так как мы не знаем, что вы пытаетесь сделать в своем компоненте, трудно быть полезным. Пожалуйста, попробуйте подробнее узнать, если один из следующих ответов не решит ваш вариант использования.