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

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

[historydev]

function toggle() {
	this.open = !this.open;
}

const obj = {
	open: false
}

toggle.apply(obj);

Comments

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

Это то понятно... а как сделать так
что бы этот код был подкреплён к обьекту?)

let open = false;
function toggle() {
    open = !open;
}

ну типа что бы он считался как

{
    open: false,
    toggle() {
        this.open = !this.open
    }
}

[historydev]

Сергей Ержович, так?

const obj = {
	open: false,
  toggle: function() {
  	this.open = !this.open;
  }
}

obj.toggle();

console.log(obj.open)

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

Владимир, ага надо что бы он так интерпретировал грубо говоря
К примеру в секции скрипт у меня такой код:

open = false
toggle = () => {
  open = !open
  console.log(open)
}

Лоадер его загружает например таким образом, ну тут наверно надо немного подшаманить, прокси сделать. ну это так для примера.

new Function(`
const component = { open: null, toggle: null }
      with (component) {
          ${scriptStr}
      }
 return component;
`)

В общем надо сделать так что бы скрипт в файле компонента выглядел как бы сам по себе, а не обьект. ну это так себе через with, мб есть какие то ещё способы ?

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

В общем что бы было понятнее:

var test = 'ololo'
console.log(window.test)

А надо:

var test = 'ololo'
console.log(component.test)

[historydev]

Сергей Ержович, какой-то бред, единственное что на уме у меня, перебирать ключи this (window) в глобале и искать свои переменные по именам, присваивать прототипу component аналогичные ключ = значение.
Я больше не хочу этим заниматься)

var test = 0;
var a = 2;

for(var name in this) {
	console.log(name)
}

Answer 2

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

Если речь про компонент 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 возвращается функцией – каждый раз новая копия.

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