Иногда мы хотим сделать вспомогательные функции глобально доступными для однофайловых компонентов с помощью Vue.js.
В этой статье мы рассмотрим, как сделать вспомогательные функции глобально доступными для однофайловых компонентов с помощью Vue.js.
Сделайте вспомогательные функции глобально доступными для однофайловых компонентов с помощью Vue.js
Мы можем создавать примеси, чтобы сделать вспомогательные функции глобально доступными для однофайловых компонентов с помощью Vue.js.
Например, мы можем написать:
<template> <div id="app"> {{ capitalizedName }} </div> </template> <script> import Vue from "vue"; Vue.mixin({ methods: { capitalizeFirstLetter: (str) => str[0].toUpperCase() + str.slice(1), }, }); export default { name: "App", data() { return { name: "james", }; }, computed: { capitalizedName() { return this.capitalizeFirstLetter(this.name); }, }, }; </script>
Мы вызываем Vue.mixin
с объектом, чтобы создать собственный миксин.
Он создает глобальный миксин, поэтому он будет автоматически доступен для всех компонентов.
В объекте у нас есть свойство methods
, которое установлено для объекта с некоторыми методами компонента.
Он имеет метод capitalizeFirstLetter
, который принимает строку и возвращает строку с заглавной первой буквой.
Далее мы возвращаем реактивное свойство name
в методе data
.
Затем мы создаем вычисляемое свойство capitalizedName
, которое вызывает метод capitalizeFirstLetter
из миксина с this.name
и возвращает возвращаемый результат.
Затем мы добавляем capitalizedName
в шаблон для его рендеринга.
И мы видим, что в результате отображается «Джеймс».
Заключение
Мы можем создавать примеси, чтобы сделать вспомогательные функции глобально доступными для однофайловых компонентов с помощью Vue.js.
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.