Как в script получить доступ к переменной из script setup?

Во Vue 3, который используется в Nuxt.js с версии 2.12.0 и выше, есть новый способ определения компонентов с использованием композиционного API и блока <script setup>. Это позволяет определить компонент более кратко и наглядно.

Чтобы получить доступ к переменным из блока <script setup> внутри обычного <script>, можно использовать рефы. Реф позволяет создать ссылку на объект и обращаться к его значению.

Например, если у вас есть компонент с блоком <script setup>, в котором определена переменная count:

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
let count = ref(0);

const increment = () => {
  count.value++;
};
</script>

Чтобы получить доступ к переменной count из обычного блока <script>, можно использовать реф следующим образом:

<script>
import { ref } from 'vue';

export default {
  setup() {
    const countRef = count;

    // Теперь вы можете использовать countRef.value в вашем обычном блоке <script> 
    return { countRef };
  }
};
</script>

Теперь переменная countRef в обычном блоке <script> будет указывать на ту же самую переменную, что и count в блоке <script setup>, и вы сможете получить доступ к её значению через countRef.value.

Надеюсь, это ответило на ваш вопрос! Если у вас есть еще вопросы или нужна дополнительная информация, не стесняйтесь спрашивать.