Vue.js 跨组件共享输入数据

Question

我有 4 个显示不同数据的组件。在每个组件中，我都有一个包含输入的导航栏，我用它来过滤组件中的数据，如下所示：

computed: {
  filteredItems() {
    if (this.search !== '') {
      return this.allManufacturers.filter(item => {
        return item.id.toUpperCase().startsWith(this.search.toUpperCase()) === true
      })
    }
    return this.cars.filter(item => {
      return item.id.toUpperCase().startsWith(this.search.toUpperCase()) === true
    })
  },
},

计算的属性在 4 个组件中是不同的。 我想将导航栏移动到一个组件并使用导航栏中的输入进行过滤，而不是在每个组件中复制代码

Answer 1

创建一个导航栏组件，它将$emit 一个包含搜索值的search 事件。它只有一个模板：

<template>
  <div>
    <input @input="$emit('search', $event)" />
  </div>
</template>

您可以在任何其他组件中使用它，如下所示：

<template>
  <div>
    <navigation @search="newSearch($event.target.value)"></navigation>
    {{ filteredItems }}
  </div>
</template>

data() {
  return {
    search: ''
  }
},
computed: {
  filteredItems () {
    if (this.search !== '') {
      return this.allManufacturers.filter(item => {
        return item.id.toUpperCase().startsWith(this.search.toUpperCase()) === true
      })
    }
    return this.cars.filter(item => {
      return item.id.toUpperCase().startsWith(this.search.toUpperCase()) === true
    })
  },
},
methods: {
  newSearch(text) {
    this.search = text;
  }
}