- Вызов в отсеке script в методах, хуках
this.$store.getters['ИмяВычисления'](Параметры);Рубрика: Vue компонент
- Родительская компонента содержит переменную в data
<template>
<comp v-bind:ИмяПропса="ИмяОбъекта">
</template>
<script>
export default{
data(){
return {
ИмяОбъекта: Значение
}
}
}
</script>- Дочерняя компонента comp
пропсы нельзя изменять
<script>
export default{
props:{
ИмяПропса:{
type:Array,
requered:true,
}
}
}
</script>- Вызов экшена в script в отсеках
this.$store.dispatch(‘ИмяЭкшена‘);
this.$store.dispatch(‘ИмяМодуля/ИмяЭкшена‘);
Динамическая подгрузка постов
mounted
хук mounted представляет собой обычную функцию.
Нам необходимо вызвать функцию fetchPosts для того чтобы посты подгрузились сразу при первом открытии приложения.
setTimeout
Динамическая задержка
для того чтобы видеть загрузку
isPostsLoading
модель
индикатор, которая оповещает что загрузка идёт
src\App
<template>
<div class="app">
<h1>Страница с постами</h1>
<my-button
@click="showDialog"
style="margin: 15px 0;" кнопка не должна прилипать к заголовку
>Создать пост</my-button>
<my-dialog v-model:show="dialogVisible">
<post-form
@create="createPost"
/>
</my-dialog>
<post-list
:posts="posts"
@remove="removePost"
v-if="!isPostsLoading"
/>
<div v-else>Идет загрузка...</div>
<div>
</template>
<script>
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
import axios from "axios";
export default{
components:{
PostList,PostForm,
}
data(){
return {
posts:[],
dialogVisible:false,
isPostsLoading:false,
}
}
methods:{
createPost(post,second,third){
this.posts.push(post);
this.dialogVisible = false;
}
removePost(post) {
this.posts = this.posts.filter(p => p.id !== post.id)
},
showDialog(){
this.dialogVisible = true;
},
async fetchPosts(){
try{
this.isPostsLoading = true;
setTimeout(async()=> {
const response = await axios.get('https://jsonplaceholder.typicode.com/posts?_limit=10');
this.posts = responce.data;
this.isPostsLoading = false;
},1000)
} catch(e){
alert('ошибка')
}
}
},
mounted(){
this.fetchPosts();
}
}
</script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.app{
padding: 20px;
}
</style>
Рубрики
Примеры Vue Mixins
mydialog
компонент модальное окно
у него есть props show и в зависимости от этого пропса данное окно видимое или не видимое
есть функция, которая изменяет значение этого атрибута, например делает emit
- использование для компонента
List
кастомный выпадающийся список
- создание мексина
может быть видим или не видим.
есть функция, которая значение это меняет
mixins\toggleMixin.js
export default{
props:{
show:{type:Boolean,default:false}
},
methods:{
hideDialog(){
this.$emit('update:show',false);
}
},
}- вызов миксина (пропса)
в каком то компоненте в проекте
<template>
{{show}}
</template>
<script>
import toggleMixin from './mixins/toggleMixin';
export default {
mixins:[toggleMixin],
}
</script>Событие
Объект вызывается как событие тега без возвращения значения
<template>
<a @click="Объект">test</a>
</template>Атрибут
Присвоить значению атрибута тега от Объекта
<template>
<a :title="Объект">test</a>
</template>Объект
- имя функции
- значение
- javascript выражение
Vuex позволяет использовать Getters в компоненте Template или «геттеры» в хранилище. Можете считать их вычисляемыми свойствами хранилища. Как и вычисляемые свойства, результаты геттера кэшируются, на основе его зависимостей и пересчитываются только при изменении одной из зависимостей.
Getters — это функции, которые повторно вычисляются при изменении переменной в модуле
Структура секции Script в компоненте содержит логику компонента, которую можно вынести в Mixins для переиспользования в других компонентах.
<script>
export default{
name: 'full-name',//имя компонента для секции template
components:{...},
data:()=>{return object},
props:{...},
methods:{...},
hook(){...},
}
</script>Первый Vue3 компонент в Laravel проекте
Регистрация компонента может проводится двумя видами во Vue.js
1. Глобальная
регистрация компонента
- явная регистрация
До сих пор мы создавали компоненты с помощьюVue.component - не явная регистрация
2. Локальная
регистрация компонента
Глобальная регистрация часто не идеальна. Например, если вы используете систему сборки, такую как Webpack, глобальная регистрация всех компонентов означает, что даже если вы прекратите использовать компонент, то он всё равно будет включён в вашу сборку приложения. Это излишне увеличит количество JavaScript, который должны будут загрузить ваши пользователи.
В таких случаях вы можете определить свои компоненты как обычные объекты JavaScript
- Структура примеси файла
mixins/ИмяМексина.js
export default {
props:{prop1},
data(){},
methods:{},
computed:{},
watch:{},
...
}- Использование примеси в компоненте
На примере обращение к пропсу prop1
<template>
{{prop1}}
</template>
<script>
import ИмяМексина from './mixins/ИмяМексина';
export default {
mixins:[ИмяМексина],
}
</script>