从 VueJS 中的不同组件调用 v-model

Question

如何调用放置在不同组件中的 v-model？ search 文本字段放在 App.vue 中，我需要在 中触发 :search='search'数据表.vue

App.vue 代码：

    <v-text-field
    v-model="search"
    class="mx-3"
    label="Suche"
    ></v-text-field>

Datatable.vue 代码：

<v-data-table
ref='dTable'
:items='products'
:search='search'
class='elevation-1'
>

Answer 1

您可以通过多种不同的方式在组件之间共享数据。

在你的情况下，因为你有一个v-text-field 绑定到你的search-data，你可以简单地将它传递给你的Datatable 组件。

<div id="app">
  <v-text-field v-model="search" ...  />
  <Datatable v-bind:search="search" ... />
</div>

然后你必须“捕捉”并在你的 Datatable 组件中使用它。

---

其他共享数据的方式：

服务总线

其中一种方法是创建serviceBus，向应用程序的不同部分发出更改。看看this blog post。

在您的情况下，您将在数据表组件中为 serviceBus.$on('searchInitiated', (query) => { ... }) 设置一个侦听器 - 并在搜索组件中通过调用 serviceBus.$emit('searchInitiated', this.search) 触发搜索；

这使您可以在不同的组件之间共享组件状态，而不受层次结构的影响。

---

使用 Props 将数据传递给子组件

“共享数据”的另一种方式是让“高级组件”跟踪您的状态 - 然后是 pass the data on to child components。

如果你有一个嵌套很深的组件层次结构，这可能会变得很麻烦 - 因为你必须将 prop 从一个组件传递到另一个组件。

---

通过事件向父母发送消息

您也可以将emit values from a child component (Search) 传递给父 (App)，然后将此数据传递给您的 DataTable。

“服务总线”示例的变体，不同之处在于没有“共享总线” - 您必须专门将回调附加到您的子组件。

---

通过vuex分享状态

您还可以利用vuex 在组件之间共享状态。 Here 是一个很好的入门指南。