组件之间的数据通信问题答案

【问题标题】：Problems with data communication between components组件之间的数据通信问题
【发布时间】：2019-09-11 23:03:46
【问题描述】：

我有一个页面，上面有一个标题，其中包含一个搜索引擎、一个帖子列表和分页的输入。我决定将标题从这个文件移动到单独的 vue 文件中的单独组件。完成此操作后，按标题搜索帖子停止工作，我现在也无法添加帖子。我认为我需要将我的帖子导入到我新创建的组件的新文件中，但是该怎么做。

My code when it worked(before my changes)

更改后我的代码无法正常工作：

我的帖子所在的文件：

<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 axios from 'axios';
  export default {
    name: 'Pagination',
    data () {
      return {
        search: '',
        current: null,
        page: 0,
        posts: [],
        createTitle: '',
        createBody: '',
        visiblePostID: '',
      }
    },
    watch: {
      counter: function(newValue, oldValue) {
        this.getData()
      }
    },
    created(){
      this.getData()
    },
    computed: {
      evenPosts: function(posts){
        return Math.ceil(this.posts.length/6);
      },

      paginatedData() {
        const start = this.page * 6;
        const end = start + 6;
        return this.posts.filter((post) => {
          return post.title.match(this.search);
        }).slice(start, end);
      },
    },
    methods: {
      getData() {
        axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
          this.posts = response.data
        })
      },

    }
  }
</script>

头文件：

加邮

<script>
  import axios from 'axios';
  export default {
    name: 'Pagination',
    data () {
      return {
        search: '',
        current: null,
        posts: [],
        createTitle: '',
        createBody: '',
      }
    },
    created(){
      this.getData()
    },
    methods: {
      getData() {
        axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
          this.posts = response.data
        })
      },
      addPost() {
        axios.post('http://jsonplaceholder.typicode.com/posts/', {
          title: this.createTitle,
          body: this.createBody
        }).then((response) => {
          this.posts.unshift(response.data)
        })
      },
    }
  }
</script>

App.vue:

<template>
  <div id="app">
    <header-self></header-self>
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  components: {
    name: 'app',
  }
}
</script>

【问题讨论】：

标签： javascript html vue.js vue-component

【解决方案1】：

您的“posts”组件中有一个计算属性 paginatedData，它依赖于一个变量 this.search：

paginatedData () {
  const start = this.page * 6;
  const end = start + 6;
  return this.posts.filter((post) => {
    return post.title.match(this.search);
  }).slice(start, end);
},

但 this.search 值未在该组件中更新，因为您将填充该值的搜索输入移动到标题组件中。

您现在需要做的是确保将更新后的搜索值传递到您的“posts”组件中，以便 paginatedData 计算属性检测到更改并计算新的 paginatedData 值。

您现在需要在可能没有父/子关系的组件之间传递值。

在您的场景中，我会考虑使用一些 Simple State Management 来处理这种需求，如 Vue 文档中所述。

根据您应用的规模，可能值得为状态管理实施 Vuex。

【讨论】：