Иногда мы хотим сделать вспомогательные функции глобально доступными для однофайловых компонентов с помощью 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.