Функциональные компоненты VueJS (SFC): как инкапсулировать код? - PullRequest
Новая
       7

Функциональные компоненты VueJS (SFC): как инкапсулировать код?

0 голосов
/ 04 июня 2018

Я написал простой компонент подстановки шаблонов в VueJS как однофайловый компонент.У него не так много функций: только одна подпорка, и я также создал вычисляемое свойство для инкапсуляции некоторых хитрых преобразований, которые выполняются с этой подпоркой, прежде чем ее можно будет использовать в шаблоне.Это выглядит примерно так: 

<template>
  ...some-html-here...
    <a :href="myHref">...</a>
  ...
</template>

<script>
  export default {
    name: 'MyComponent',
    props: {
      href: { type: String, required: true },
    },
    computed: {
      myHref() {
        let result = this.href;
        // several lines of complicated logic making substitutions and stuff
        // ...
        return result;
      }
    }
  };
</script>

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

Я могу сделать это функциональным, просто добавив атрибут «функциональный» в мой <template>.В функциональном компоненте, конечно, нет таких вещей, как вычисляемые свойства или методы или что-то еще.Итак, мой вопрос: где я могу поместить несколько строк сложной логики?Я не хочу вставлять это непосредственно в мой шаблон, тем более что он используется в нескольких местах.Так, где я могу поместить код, чтобы преобразовать мои входные реквизиты и подготовить их к использованию в моем шаблоне?

1 Ответ

0 голосов
/ 28 июля 2018

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

Часть "html": 

<template functional>
  <div>
    <button @click="props.methods.firstMethod">Console Something</button>
    <button @click="props.methods.secondMethod">Alert Something</button>
  </div>
</template>

Часть "js": 

<script>
export default {
  props: {
    methods: {
      type: Object,
      default() {
        return {
          firstMethod() {
            console.log('You clicked me')
          },
          secondMethod() {
            alert('You clicked me')
          }
        }
      }
    }
  }
}
</script>

Смотрите это в действии здесь

Обязательно прочитайте о функциональных компонентах в документах

ПРИМЕЧАНИЕ: Помните об использовании этого подхода, поскольку функциональные компоненты не имеют состояния (не реагируютданные) и без экземпляров (без этого контекста).

...