两个子组件之间的数据传输问题

Question

Good afternoon, I have two child components Header and Pagination. In Header, I have an input search engine and two inputs (title and body) in order to be able to add a post to Pagination. I managed to transfer the search value to the Pagination component, but I don't know how to transfer the value from two inputs (title, body). I use to transfer the event bus. Help me please pass the value of the two inputs (title, body) into the Pagination component when you click the AddPost button.

My code on GitHub

Screenshot of app

My code of component Header:

    <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>

My code of component Pagination:

<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

You can wrap title and body in an object

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

and then listen as normal

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

Answer 2

I have not worked on vue js but agreed with @ittus answer. You can make an object consisting of your required data which you want to share across the component and pass it as an event data .