В настоящее время существует множество библиотек компонентов пользовательского интерфейса на основе Vue, таких как iview, element-ui и так далее. Но иногда эти библиотеки компонентов не могут удовлетворить наши потребности в разработке, на этот раз нам нужно написать свои собственные плагины.
поднять первый каштан
После создания каталога проекта с помощью vue-cli создайте новую папку в разделе src/components, чтобы поместить плагин, который мы хотим написать, как показано на рисунке:
Запишем наш компонент в index.vue, код такой:
Напишите метод установки index.vue в index.js и зарегистрируйте компонент с помощью Vue.component, Код выглядит следующим образом:
Затем нам нужно импортировать файл index.js, только что написанный в main.js по умолчанию, и использовать его через Vue.use, Код выглядит следующим образом:
Готово, теперь можете использовать его прямо в app.vue.Вы видите, что на странице отобразились соответствующие компоненты, как показано на рисунке:
На этот раз мы также можем настроить событие щелчка, и, предоставленные нам в виде параметров плагина, плагины могут быть получены атрибутом props для события, как показано:
Вы можете видеть, что страница вступила в силу:
Vue.component(id, [definition]) используется для регистрации или получения компонентов.
Vue.use(плагин) используется для установки плагинов Vue.js. Если подключаемый модуль является объектом, необходимо указать метод установки. Если плагин является функцией, он будет использоваться как метод установки. Когда вызывается метод установки, Vue передается в качестве параметра. Когда метод установки вызывается одним и тем же плагином несколько раз, плагин будет установлен только один раз.
возьми второй каштан
Создадим еще одну папку, как показано на рисунке:
Мы хотим написать компонент, который может отображать входящий контент и автоматически исчезать через 3 секунды, код выглядит следующим образом:
Далее нам нужно использовать конструктор в index.js для его создания, как показано на рисунке:
По-прежнему ссылайтесь на файл js только что в main.js по умолчанию и добавьте его в экземпляр Vue, чтобы мы могли вызывать его напрямую через this.$seconddemo() Код выглядит следующим образом:
import SecondDemo from './components/global/seconddemo/index'
Vue.prototype.$seconddemo = SecondDemo
Используйте его в app.vue и обнаружите, что плагин успешно загружен, как показано на рисунке:
Vue.extend(options) — это конструктор Vue, создающий «подкласс».
Унифицированное управление пользовательскими компонентами
Когда количество компонентов велико, мы можем управлять этими пользовательскими компонентами, предоставив унифицированный файл экспорта.Сначала создайте новый файл index.js в глобальной папке.Код показан на рисунке:
Файл index.js помогает нам зарегистрировать все пользовательские компоненты через vue.component и, наконец, экспортировать объект, содержащий метод установки для vue.use () для использования.
В настоящее время нам не нужно добавлять динамические компоненты один за другим в main.js, нам просто нужно импортировать унифицированный файл index.js и использовать Vue.use, чтобы все было в порядке.
import global from './components/global/index.js'
Vue.use(global)