FrontElf

Локальні та глобальні змінні

Цей документ описує використання локальних змінних в HTML-компонентах та глобальних змінних в проекті.

Глобальні змінні:

Глобальні змінні вказуються в файлі template.config.js в корені проекту, в обєкті HTMLVariables: {}:

Також в файлі vite.config.js вказуються глобальні змінні такі як IS_TAILWIND та IS_DEV які можна доповнювати та використовувати в HTML-компонентах:

// template.config.js

export default {
   ...
   HTMLVariables {
      VERSION: '1.0.0',
      DESCRIPTION: 'Template Project Name',
      HEAD_TITLE: 'My Awesome Site'
      API_URL: 'https://jsonplaceholder.typicode.com/users'
   }
   ...
}

// Використання в будь-якому місці проекту як звичайних пропсів

<head>
   <title>{{HEAD_TITLE}}</title>
   <meta name="description" content="{{DESCRIPTION}}"/>
</head>

<each data="{{API_URL}}" loop="user, index in data">
   <div class="user-card">
      <h2>{{user.name}}</h2>
      <p>{{user.username}}</p>
      <p>{{user.address.street}}</p>
      <p>{{user.email}}</p>
   </div>
</each>

Локальні змінні:

Локальні змінні вказуються в верхній частині файлу компонента в тегу<script define></script> як звичайні JS змінні.

Також локальні змінні можна передавати пропсами в любий компонент що викликається в середині цього компонента.

// template.config.js

<script define>
    const title = 'The Smartest Way to Do Laundry'
    const logo = '@i/logo.svg'
    const subTitle = 'DipDap picks up, cleans, and delivers your laundry & dry cleaning.'
    const contacts = {
       phone: '(800) 555-1212',
       email: 'text@gmail.com',
    }
</script>

<div class="product-card">
    <img src="{{logo}}" alt="{{title}}"/>
    <h2>{{title}}</h2>
    <p>{{subTitle}}</p>
    <ul>
       <li>{{contacts.phone}}</li>
       <li>{{contacts.email}}</li>
    </ul>
</div>