从VueJS中的其他组件调用v模型

Question

如何调用放置在其他组件中的v模型？ search 文本字段放置在 App.vue 中，我需要在中触发：search ='search' Datatable.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数据的数据，因此只需将其传递到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)触发搜索；

这使您可以在不同组件之间共享组件状态，而与层次结构无关。

---

使用道具将数据传递到子组件

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

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

---

通过事件向家长发送邮件

您还可以emit values from a child component（Search）到父（App），然后将此数据传递到您的DataTable。

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

---

通过vuex共享状态

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