<div class="container">
    <swiper class="swiper-style">
        <img src="/common/Phone_00.jpg" class="image-mode"></img>
        <img src="/common/Phone_01.jpg" class="image-mode"></img>
        <img src="/common/Phone_02.jpg" class="image-mode"></img>
        <img src="/common/Phone_03.jpg" class="image-mode"></img>
    </swiper>
    <div class="title-section">
        <div class="phone-title">
            <span class="phone-name">HUAWEI</span>
            <span class="phone-definition">Thinking Possibilities</span>
        </div>
        <div class="favorite-image">
            <img src="{{unFavoriteImage}}" class="image-size" onclick="favorite"></img>
        </div>
        <div class="favorite-count">
            <span>{{number}}</span>
        </div>
    </div>
    <div class="description-first-paragraph">
        <span class="description">{{descriptionFirstParagraph}}</span>
    </div>
    <div class="description-second-paragraph">
        <span class="description">{{descriptionSecondParagraph}}</span>
    </div>
</div>

export default {
    data: {
        unFavoriteImage: "/common/unfavorite.png",
        isFavorite: false,
        number: 20,
        descriptionFirstParagraph: "Перелом границ визуального восприятия, исследование фотографии и видеографии, освобождение мощности и скорости, а также инновация взаимодействия теперь готовы к открытию. Принимайте будущее со всеми новыми возможностями.",
        descriptionSecondParagraph: "Освещая бесконечные возможности. Четвертая камера HUAWEI окружена световым кольцом. Это идеальное сочетание отражения и преломления."
    },
    methods: {
        toggleFavorite() {
            this.isFavorite = !this.isFavorite;
        }
    }
};

<!-- index.html определяет несколько видов кнопок -->
<div class="div-button">
    <button class="button" type="capsule" value="Капсульная кнопка"></button>
    <button class="button circle" type="circle" icon="common/logo.png"></button>
    <button class="button text" type="text">Текстовая кнопка</button>
    <button class="button download" type="download" id="download-btn"
            onClick="setProgress">{{downloadText}}</button>
    <button class="button" type="capsule" waiting="true">Загрузка... </button>
    <button class="button" type="arc">Дуговая кнопка</button>
</div>

export default {
    data: {
        progress: 5,
        downloadText: "Загрузка"
    },
    setProgress(e) {
        this.progress += 10;    // Увеличиваем прогресс на 10% при каждом нажатии
        this.downloadText = this.progress + "%";
        if (this.progress >= 100) {
            this.downloadText = "Завершено";   // Отображаем завершение при достижении 100%
        }
    }
}

<!-- index.html -->
<div class="container">
    <list>
        <list-item-group>
            <list-item class="item_style"><text class="big_size">Фрукты</text></list-item>
            <list-item><text class="font_size">Яблоко</text></list-item>
            <list-item><text class="font_size">Банан</text></list-item>
        </list-item-group>
        <list-item-group>
            <list-item class="item_style"><text class="big_size">Напитки</text></list-item>
            <list-item><text class="font_size">Кока-кола</text></list-item>
            <list-item><text class="font_size">Кофе</text></list-item>
        </list-item-group>
        <list-item-group>
            <list-item class="item_style"><text class="big_size">Снеки</text></list-item>
            <list-item><text class="font_size">Чипсы</text></list-item>
            <list-item><text class="font_size">Потрошенка</text></list-item>
        </list-item-group>
    </list>
</div>

.item_style {
    background-color: pink;
}
.big_size {
    font-size: 50px;
}

<element name="comp" src="./comp.html"></element>
<div>
    <comp prop1='xxxx' @child1="bindParentVmMethod"></comp>
</div>
```* Атрибут `name` указывает имя пользовательского компонента (необязательный атрибут; если имя не указано, то используется имя файла HML). Атрибут `src` указывает путь к файлу HML пользовательского компонента. Для точного указания пути этот атрибут обязательно должен быть заполнен. Обратите внимание, что `"../"` указывает на родительскую директорию.
* Атрибуты `prop` используются для связи между компонентами и могут передаваться в компонент через `<tag prop='значение'>`; названия должны быть записаны строчными буквами.
* Взаимодействие событий: события внутри пользовательских компонентов привязываются к событиям дочерних компонентов с помощью синтаксиса `(on или @)child1`, где события дочернего компонента вызываются через `this.$emit('child1', {params: 'передаваемые параметры'})`, а метод `bindParentVmMethod` в родительском компоненте получает эти параметры.Следующий пример демонстрирует создание пользовательского компонента и его использование в родительском компоненте. Создайте новую директорию `comp` в папке `pages`, а также создайте базовый файл HTML, CSS и JS для этого компонента. Код представлен ниже:

```html
<div class="item">
    <text class="title_style">{{title}}</text>
    <text class="text-style" onclick="childClicked">Нажмите здесь, чтобы показать скрытый текст</text>
    <text class="text-style" if="{{showword}}">Hello World</text>
</div>

.item {
    width: 700px;
    flex-direction: column;
    height: 300px;
    align-items: center;
    margin-top: 100px;
}
.text-style {
    font-weight: 500;
    font-family: Courier;
    font-size: 40px;
}

export default {
    props: {
        title: {
            default: 'title'
        }
    },
    data: {
        showword: false
    },
    methods: {
        childClicked() {
            this.$emit('eventType1', { text: "полученные параметры от дочернего компонента" });
            this.showword = !this.showword;
        }
    }
};

<element name="comp" src="./comp/comp.hml"></element>
<div class="container">
    <text>Родительский компонент: {{text}}</text>
    <comp title="Пользовательский компонент" @event-type1="textClicked"></comp>
</div>
```
```css
.container {
    background-color: #f8f8ff;
    flex: 1;
    flex-direction: column;
    align-content: center;
}
```
```javascript
export default {
    data: {
        text: "начало"
    },
    textClicked(clicked) {
        this.text = clicked.detail.text;
    }
}
```
В данном примере родительский компонент передает параметр с названием `title` в пользовательский компонент через свойство. Пользовательский компонент принимает этот параметр через `props`. Установленные свойства могут быть объявлены как атрибуты в пользовательском компоненте. Внешний родительский компонент передает параметры используя конвенцию kebab-case (например, `event-type1`).
```Пользовательский компонент также может отправлять данные обратно в родительский компонент через события. Например, событие `textClicked`, которое родительский компонент получает через `clicked.detail`.

![Изображение](https://images.gitee.com/uploads/images/2021/0722/182031_dece65e7_8496150.png "%Просмотр 1.png")

Передача данных между родительским и дочерним компонентами является односторонней. Обычно данные передаются от родительского компонента к дочернему, а если дочерний компонент хочет отправить данные обратно вверх, он должен привязаться к событию и использовать метод `$emit`.

При получении данных от родительского компонента, дочерний компонент не может напрямую изменять эти данные. Вместо этого можно использовать `data`, чтобы принять значения из `props` как начальные значения, а затем работать с этими значениями.

Для наблюдения за изменениями свойств внутри компонента, можно использовать метод `$watch` для добавления обратного вызова при изменении свойства.