Ургенчский филиал ташкентского университета информационных технологий имени мухаммад ал-хоразмий



Download 287,1 Kb.
bet3/5
Sana16.06.2022
Hajmi287,1 Kb.
#678157
1   2   3   4   5
Bog'liq
Документ Microsoft Word

@click="onClick">
{{message}}





Здесь я первым делом импортирую Component и Prop из пакета vue-property-decorator. Затем внутри класса App я использую декоратор @Prop для установки значения сообщения по умолчанию.
И это всё! Теперь вы передаёте в ваш код сообщение в качестве пропса, и у него есть значение по умолчанию.
Определяем место контента в компонентах с помощью Vue-слотов
Vue-слоты позволяют указать коду, где бы вы хотели разместить контент в компоненте. Сейчас это может звучать запутанно, поэтому давайте взглянем, что на самом деле делают слоты с помощью небольшого кода:
Вернёмся в файл main.js и перепишем код в render:
render: h => (

Superman
)
Сейчас вы не увидите изменений в браузере. Это потому, что вы совсем не указали места для нового текста в template в файле App.vue. Вот где слоты вступают в игру.
В template App.vue напишите два новых слота, расположенных до и после оригинального тега h1

Ваше приложение по-прежнему не отображает нового текста. Это потому, что компилятор теперь не знает, в какой слот положить новый текст. Я хочу, чтобы текст был в нижнем слоте под названием footer.
Теперь в файле main.js добавьте атрибут slot="footer" к новому тексту. После этого ваш текст отобразится.
Но теперь метод render немного громоздкий. Давайте посмотрим, как это можно исправить с помощью слотов.
Используем слоты для создания раскладки
Слоты также подходят для создания кастомных раскладок, которые можно использовать для указания того, где должна размещаться каждая часть вашего приложения или компонента.
Создайте новый файл Layout.vue в папке src/components. Внутри этого файла напишите элемент template как показано ниже:

Теперь в файле App.vue удалите всё внутри тега template. Затем в теге script импортируйте только что созданный Layout.vue.
import Layout from './components/Layout';
Вам также нужно сказать декоратору Component, что вы используете компонент Layout.
export default Component({
components: {Layout},
})
Теперь можете использовать Layout в качестве компонента в теге template. Ещё я добавлю немного элементов с текстом.