Рубрики
Vue project Vue директива Vue директива v-model Vue.js

Директива v-model

Подписывание в родительском компоненте App.vue

src\App.vue

в App делаем подпись события
createPost это событие компонента App

<template>
<div class="app">
<post-form
@create="createPost"
/>

<post-list 
:posts="posts"
/>
<div>
</template>

<script>
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
export default{
components:{
 PostList,PostForm,
}
data(){
return {
posts:[
{id:1,title: 'Javascript', body: 'Описание поста'},
{id:2,title: 'Javascript 2', body: 'Описание поста 2'},
{id:3,title: 'Javascript 3', body: 'Описание поста 3'},
{id:4,title: 'Javascript 4', body: 'Описание поста 4'},
]
}
}
methods:{
 createPost(post,second,third){
  добавление переданного поста из дочернего компонента в родительском
  this.posts.push(post);
}
}
}
</script>

<style>
классическое обнуление
убрать отступы на странице
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
убираем прилепление всего к краям страницы
на корню страницы
.app{
 padding: 20px;
}
</style>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *