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

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

Для передачи данных из дочернего компонента в родительский компонент мы генерируем событие, которое принимает один единственный аргумент (новый пост) Create(Post).
Из родительского компонента мы можем на это событие подписаться

Есть некий родительский компонент и соответственно дочерний компонент. Как передать данные из родителя к ребёнку мы уже знаем (через пропсы). Но как нам передать данные из ребёнка к родителю (в данном случае из компонента из PostForm в компонент App, где у нас находится список постов. Напрямую передать данные из ребёнка в родитель нельзя, но всё же данные в родителе мы можем. В ребёнке мы генерируем некоторое событие (в данном случае событие мы называем create и параметром оно принимает один единственный аргумент это как раз новый пост). В vue это идентично событию click,input,change и т.д. Соответственно из родительского компонента мы на это событие можем подписаться
(точно так же ка мы подписывалиcь на событие input или click)
Нативные события (такие же как input или click) аргументом принимают event. В данном случае, если мы подпишимся на событие create, аргументом мы будем принимать тот самый пост, который создаётся внутри дочернего компонента

функция

• первый параметр
  принимает название события, которое мы генерируем
  в данном случае create
• вторым и последующими параметрами
  мы передаём аргументы, которые будут попадать в соответствующую функцию, после того как на неё подпишется родительский компонент
  в данном случае передаём новый созданный пост

объект обёрнут в proxy (передаваемый пост) говорит об реактивности

src\components\PostForm.vue

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

<input 
type="text" 
v-model="post.title"
class="input"
placeholder="Название">

<input 
type="text" 
v-model:"post.body"
class="input"
placeholder="Описание">

<button 
class="btn"
подписывание на событие
@click="createPost"
>Создать</button>
</form>
</template>

<script>
export default{
data(){
return {
post{
title:'',
body:'',
}
}
},
methods:{
createPost(){
 this.post.id=Date.now();

 this.$emit('create',this.post,'second param','3 param')
очистить значения в input-ах
 this.post={
 title:'',
 body:'',
 }
} 
}
</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>