UI Компоненты

UI Button
UI Input
Заменим в компонентах
PostForm и PostItem

Button на компонент my-button
Input на компонент my-input

Все стили, директивы, события, которые мы навешиваем на компонент MyButton будут применяться к корневому элементу, который находится уже непосредственно в самом компоненте. В данном случае всё это будет применятся к этой кнопке. Это поведение мы так же можем изменить.

src\components\PostForm.vue

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

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

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

<my-button 
style="align-self: flex-end;margin-top: 15px;" 
@click="createPost">Создать
</my-button>
</form>
</template>

<script>
import MyButton from "@/components/UI/MyButton";
export default{
name:'my-button',
components:{
MyButton,
},
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>

src\components\PostItem.vue

<template>
<div class="post">

<div>
<div><strong>Название:</strong>{{post.title}}</div>
<div><strong>Описание:</strong>{{post.body}}</div>
</div>

<div class="post_btns">
 <my-button @click="$emit('remove', post)">Удалить</my-button>
</div>

</div>
</template>

<script>
import MyButton from "@/components/UI/MyButton";
export default{
components:{
 MyButton,
}
 props:{
  post:{
   type:Object,
   required:true,
  }
 }
}
</script>

<style scoped>
.post{
 padding: 15px;
 border: 2px solid teal; темно зелёная рамка
 margin-top:15px; отступ сверху
 
 display:flex;
 align-tems: center;
 justify-content: space-betwen; кнопка не прилипает к описанию
}
</style>