Проблема передачи данных между двумя дочерними компонентами

Question

Добрый день, у меня есть два дочерних компонента Header и Pagination. В заголовке у меня есть поисковая система ввода и два ввода (заголовок и тело), ​​чтобы иметь возможность добавить пост в разбиение на страницы. Мне удалось передать значение поиска в компонент Pagination, но я не знаю, как передать значение из двух входных данных (заголовок, тело). Я использую для передачи событий автобус. Помогите, пожалуйста, передать значение двух входных данных (заголовок, тело) в компонент Pagination при нажатии кнопки AddPost.

Мой код на GitHub

Снимок экрана приложения

Мой код компонента Заголовок:

    <template>
<div class="header">
  <input type="text" v-model="search" class="header_input_search" placeholder="Search" @input="saveMessage" />
  <img src="src/assets/milk.png">
  <div class="header_div_inputs">
    <input type="text" v-model="createTitle" class="created"/>
    <p><input type="text" v-model="createBody" class="createBody"/></p>
  </div>
  <button  @click="addPost()" class="addPost">AddPost</button>
</div>
</template>

<script>
  import axios from 'axios';
  import {eventEmitter} from './main'

  export default {
    name: 'Header',
    data () {
      return {
        search: '',
        createTitle: '',
        createBody: '',
      }
    },
    methods:{
      saveMessage(){
        eventEmitter.$emit('messageSave', this.search)
      },
    }
  }
</script>

Мой код компонента Нумерация страниц:

<template>
  <div class = "app">
    <ul>
      <li v-for="(post, index) in paginatedData" class="post" :key="index">
        <router-link :to="{ name: 'detail', params: {id: post.id, title: post.title, body: post.body} }">
        <img src="src/assets/nature.jpg">
        <p class="boldText"> {{ post.title }}</p>
        </router-link>
        <p> {{ post.body }}</p>
      </li>
      </ul>
        <div class="allpagination">
          <button type="button" @click="page -=1" v-if="page > 0" class="prev"><<</button>
          <div class="pagin">
            <button class="item"
            v-for="n in evenPosts"
            :key="n.id"
            v-bind:class="{'selected': current === n.id}"
            @click="page=n-1">{{ n }} </button>
          </div>
          <button type="button" @click="page +=1" class="next" v-if="page < evenPosts-1">>></button>
        </div>
      </div>
    </template>

    <script>
      import {mapState} from 'vuex'
      import {eventEmitter} from './main'
      export default {
        name: 'app',
        data () {
          return {
            current: null,
            page: 0,
            visiblePostID: '',
            pSearch: ''
          }
        },
        mounted(){
          this.$store.dispatch('loadPosts')
        },
        computed: {
          ...mapState([
          'posts'
          ]),
          evenPosts: function(posts){
            return Math.ceil(this.posts.length/6);
          },

          paginatedData() {
            const start = this.page * 6;
            const end = start + 6;
            return this.filteredPosts.slice(start, end);
          },
          filteredPosts() {
            return this.posts.filter((post) => {
              return post.title.match(this.pSearch);
            });
          },
        },
        created(){
          eventEmitter.$on('messageSave', (string) => {
            this.pSearch = string
          })
        }
      }
    </script>

Answer 1

Вы можете обернуть заголовок и тело в объект

addPost() {
      const post = {
        title: this.createTitle,
        body: this.createBody
      }
      eventEmitter.$emit('postAdd', post)
    }

, а затем прослушать как обычно

created(){
  eventEmitter.$on('postAdd', (post) => {
    console.log(post)
    // do whatever you want
  })
}

Answer 2

Я не работал над vue js, но согласился с @ ittus answer.Вы можете создать объект , состоящий из ваших необходимых данных, которые вы хотите использовать в компоненте, и передать их как данные события .