使用 EventBus 通过单个文件组件传递 Vue js 搜索过滤器功能

Question

我有以下组件：

/components/SearchBlogs.vue 搜索组件以过滤 blog.title 和 blog.description。

/components/BlogList.vue这里我列出了所有的博客项目。

SearchBlogs.vue

<template>
  <div>
    <input type="text" v-model="search" @change="emitSearchValue" placeholder="search blog">
  </div>
</template>

<script>
import { EventBus } from '../event-bus.js'

export default {
  name: 'SearchBlogs',
  data: () => {
    return {
      search: ''
    }
  },
  methods: {
    emitSearchValue() {
      EventBus.$emit('search-value', 'this.search')
    }
  }
}
</script>

BlogList.vue

<template>
<div>
  <div v-for="blog in filteredBlogs" :key="blog">
    <BlogListItem :blog="blog" /> 
  </div>
</div>
</template>

<script>
import BlogListItem from './BlogListItem'
import { EventBus } from '../event-bus.js'

export default {
  name: 'BlogList',
  components: {
    BlogListItem,
  },
  data: () => {
    return {
      blogs: [],
      searchvalue: ''
    }
  },
  computed: {
    filteredBlogs() {
      return this.blogs.filter(blog =>
        blog.name.toLowerCase().includes(
          this.searchvalue.toLowerCase()
        )
      )
    }
  },
  created() {
    fetch('http://localhost:3000/blogs')
    .then(response => {
      return response.json();
    })
    .then(data => {
      this.blogs = data;
    }),
    EventBus.$on('search-value', (search) => {
      this.searchvalue = value;
    })
  }
}
</script>

在另一个页面组件博客我注册了两个组件：

<template>
  <div>
    <h1>Blog</h1>
    <TheSidebar>
      <SearchBlogs />
    </TheSidebar>
    <BlogList/>
  </div>
</template>

任何人都可以看到这里缺少什么吗？我希望，一旦用户在搜索输入（来自SearchBlogs.vue 组件）中输入内容，它就会开始过滤和更新列表。

Answer 1

看看我的解决方案condesandbox

这里有一个解释： 您不需要使用 EventBus。您可以通过 v-model 与搜索组件通信，使用 prop value 并从 Input 发出更新的 value。

那么你的主（列表）组件负责所有的逻辑。

1. 它保持搜索状态
2. 它保留项目和过滤的项目

感谢您的搜索组件非常清晰，没有数据，这意味着它几乎没有责任。

如果我可以添加一些内容来帮助您理解，请提出问题?

更新：

1. EventBus 在某些情况下是一个很好的补充。您的案例很简单，无需添加。现在，您的架构“过度设计”。
2. 当您在 EventBus 上添加侦听器时，created:hook您应该始终在组件为destroyed 时将其删除。否则你可能会遇到双重调用功能等问题。这很难调试，试试我他去过那里?
3. 接受我的建议会让您感到“无需记住这个”，因为 Vue 正在为您做这件事。

希望有所帮助。

Answer 2

几个问题，但基本上计算出来的 prop filteredData 看起来像：

computed: {
    filteredData() {
      return this.experiences.filter(
        el => el.category.indexOf(this.search) > -1
      );
    }
}

此外，在将其值传回时，在 'this.search' 周围使用引号，使其成为字符串。

固定沙盒

https://codesandbox.io/s/reverent-lamarr-is8jz