Как привязать переменные из области видимости к обьекту?

Question

[Сергей Ержович]

Есть SFC компонет:

<template>
  <div class="spoiler" :class="open && 'spoiler--open'">
    <div class="spoiler__header" @click="toggle">
      <slot name="header">{header_default}</slot>
    </div>
    <div class="spoiler__body" x-show="open">
      <slot>{body_default}</slot>
    </div>
  </div>
</template>

Так же в нём есть секция script:

<script>
  return {
    init() {
      console.log('init')
    },
    open: true,
    toggle() {
      this.open = !this.open
    },
    destroy() {
      console.log('DESTROY')
    }
  }
</script>

для компонента получаю данные через new Function(jsString).

Можно немножко подшаманить и привязать контекст к секции скрипт, получится что то типа:

<script>
  console.log('init')

  this.open = false

  toggle = () => {
    this.open = !this.open
  }

  destroy = () => {
    console.log('DESTROY')
  }
</script>

как бы уже кода меньше, но хз очевидно ли это...

Хотелось бы что бы было более очевидно, типа так:

<script>
  console.log('init')

  let open = false

  function toggle(){
    open = !open
  }

  function destroy(){
    console.log('DESTROY')
  }
</script>

Как это можно сделать ? И вообще стоит ли, или в самом первом варианте через return норм?

Comments

[Сергей Соколов]

это VueJS ?

аббревиатура SFC и так включает слово "component" (буква "C")

Answer 1

[Сергей Соколов]

Если речь про компонент VueJS, то похоже, упустили data, где хранятся собственные данные инстанса компонента.

Что-то типа:

<script>
export default {
  data() {
    return {
      isOpen: false,
    }
  }

  methods: {
    toggle: () => this.isOpen = !this.isOpen,
  }
}
</script>

Comments

[Сергей Ержович]

нет не vue. грубо говоря кастомные компоненты.
хочу что бы типа как на svelte:


что бы эти все переменные const. let и тд относились к обьекту компонента.

[Сергей Соколов]

Сергей Ержович, компонент же как-то экспортируется?
То, что в items, по сути, состояние (state) инстанса компонента.
Если из этого кода создать не один, а несколько инстансов компонента, у каждого захочется иметь свой независимый state, наверное. И поэтому items надо держать не в видимости прототипа компонента, а в видимости только инстанса. Отсюда во Vue data возвращается функцией – каждый раз новая копия.

Вообще не понятно, как эти кастомные компоненты в итоге обрабатываются и в каком виде попадают в браузер?