Декомпозиция

Передача пропсов в PostList

компонент PostList ожидает поста как аргумент через пропсы, в которых есть соответствующее поле. Там мы указываем что ожидаем на вход (посты).

• можем указать тип (Массив или Array)
• чем будут инициализироваться эти посты по дефолту
  required=true
• можем сделать их обязательными

Привязывание постов в шаблоне к компоненту post-list через

длинная запись
v-bind:ПолеПропсаКомпонента=»Значение»

короткая запись
: ПолеПропсаКомпонента=»Значение»

В этом случаем посты будут передаваться в компонент PostList через пропсы и присваивать полю значение

в данном примере

• Значением является массив posts компонента App, которые объявлены в поле data,
• ПолеПропсаКомпонента
  поле пропса у компонента PostList (в данном случае posts).

src\App.vue

<template>
<div class="app">
<post-form/>
<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:{
 this.posts.push(newPost);
 this.title='';
 this.body='';
}
}
</script>

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

Пропсы в дочернем компоненте изменять нельзя
Данные должны изменяться как то в родителе, а дочерний компонент должен получить их в изменённом виде. Сам дочерний компонент напрямую не изменяет.

Как нам из компонента PostForm передать данные к родителю наверх

• добавляем функцию data и возвращаем объект c объектом post с пустыми полями title и body
• в шаблоне в месте где мы делали двустороннее связывание данные с нашим input-ом мы обращаемся не на прямую (пример title и body) а забираем его из объекта post

src\components\PostForm.vue

<template>
<div class="app">
<form @submit.prevent>
<h4>Создание поста</h4>

<input 
type="text" 
v-bind:value="post.title"
@input="post.title=$event.target.value"
class="input"
placeholder="Название">

<input 
type="text" 
v-bind:value="post.body"
@input="post.body=$event.target.value"
placeholder="Описание">

<button class="btn" @click="createPost">Создать</button>
</form>
</template>

<script>
export default{

data(){
return {
post{
title:'',
body:'',
}
}
}

methods:{
 createPost(){
 const newPost={
  id:Date.now(),уникальный из даты
  title:this.title,
  body:this.body,
 }
 this.posts.push(newPost);
 this.title='';
 this.body='';
}
 inputTitle(event){
  this.title = event.target.value;
} 
}
</script>

<style >
.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
.form{
 display:flex;
 flex-direction:column;
}
.btn{
 margin-top: 15px;
 align-self: flex-end;
 padding: 1opx 15px;
 background:none;
 color:teal;
 border: 1px solid teal;
}
</style>