Как использовать плагин Vue.js внутри пользовательского компонента?

Мне нужно вывести таблицу и ее содержимое, которое может быть обновлено через Ajax. Поэтому я планирую использовать vue-tables-2 ( https://github.com/matfish2/vue-tables-2), который является плагином Vue.js.

Используя способ Laravel, я пишу пользовательский компонент Vue.js, так как я могу использовать vue-tables-2 плагин внутри моего компонента?

Вот пример того, как использовать плагин https://jsfiddle.net/matfish2/jfa5t4sm/. К сожалению, в примере не оборачивается плагин внутри компонента.

Источник

5 ответов

Решение

У вас есть два способа сделать сторонний компонент доступным для вашего пользовательского компонента Vue:

1. Импортируйте (ES6) и используйте локально

В блоке сценария вашего компонента поместите это сверху:

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

В вашей компонентной виртуальной машине добавьте это в components имущество:

export default { 
  data () { 
    return { /* data properties here */ }
  }, 
  components: {
    ServerTable, ClientTable, Event
  }
}

Теперь вы можете использовать <v-server-table>, <v-client-table> и т. д. в шаблоне вашего компонента.

2. Импортируйте (ES6) глобально в точку входа вашего приложения: 

import { ServerTable, ClientTable, Event } from 'vue-tables-2'

Затем сделайте те части vue-tables-2, которые неоднократно нужны вашему приложению, доступными для вашего основного файла Vue и всех дочерних компонентов:

Vue.use(ClientTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

Или / и:

Vue.use(ServerTable, [options = {}], [useVuex = false], [theme = 'bootstrap3'], [template = 'default']);

Это также можно найти на странице документации Vue-таблиц-2 GitHub.

Примечание. Когда вы не используете систему сборки, такую ​​как веб-пакет, в своем приложении Vue, существует третий способ:

3. Сделать глобально доступным, когда не используется веб-пакет или тому подобное

Поместите это в свой HTML перед включением скрипта вашего приложения:

<script src="/path/to/vue-tables-2.min.js"></script>

Это выставит глобальный VueTables объект, так что в вашей точке входа приложения вы можете

Vue.use(VueTables.ClientTable);

Если вы используете глобальный способ, вам не нужно объявлять эти сторонние компоненты в components объект вашего пользовательского компонента.

Зачем мне выбирать один метод над другим?

Глобальный импорт имеет то преимущество, что вам приходится писать меньше кода и следовать принципу СУХОЙ (не повторяйте себя). Так что это имеет смысл, если вашему приложению во многих точках нужен этот плагин / сторонний компонент Vue.

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

Кроме того, если ваши собственные пользовательские компоненты в какой-то момент будут удалены из вашего приложения по какой-либо причине, ваше приложение все равно будет содержать пакет vue-tables-2, который может больше не понадобиться. В этом случае он будет бесполезно увеличивать размер вашего пакета.

Источник

Обычно, когда компонент связан с плагином, я использую created:

      created() {
    Vue.use(MustUsePlugin, { someOption: this.someProp });
},
Источник

Как установить плагин

Так что просто следуйте инструкциям.

Источник

Вы можете расширить его или даже скачать его с github и редактировать его напрямую

Источник

Компоненты зарегистрированы только один раз, во всем мире, используя Vue.use в точке входа в ваш проект (например, main.js). Тогда вы можете использовать их во всех потомках .vue файлы без их импорта.

Источник
Другие вопросы по тегам