如何连接搜索字段与数据表,如果他们在不同的看法与VUEJS?

jjhzyzn0  于 2023-02-05  发布在  Vue.js
关注(0)|答案(1)|浏览(112)

我的应用程序的导航栏组件中有一个搜索字段,我想将其与数据表连接,它们位于其他文件中。
我不确定我是否必须对pops或事件这样做。代码结构应该是什么样的?
以下是导航栏文件的搜索输入:

<v-col
cols="12"
sm="6"
md="6">

<v-text-field
v-model="search"
id="search"
class="w-10"
append-icon="mdi-magnify"
placeholder="Search"
dense
solo
flat>
</v-text-field>

</v-col>

这是List.vue中的数据表:

<v-data-table  
class="list px-10 pt-10"  
v-if="!loading"  
:headers="headers"  
:items="list"  
:items-per-page="itemsPerPage"  
:search="search"  
:page.sync="page"  
@page-count="pageCount = $event"  
show-expand  
single-expand  
:expanded.sync="expanded"  
@item-expanded="loadDetails"

>

在其他情况下,我把它们放在同一个文件中,但这次不是,我不知道搜索字段如何从表中读取数据。

cgh8pdjw

cgh8pdjw1#

根据您在帖子中添加的解释,Navbar.vueList.vue是兄弟。

如果是,您可以通过两种方式将搜索字段值传递给列表组件**:**
1.通过使用emitNavbar组件传递给父组件,然后通过props从父组件将该值传递给列表组件。
1.使用vuex存储状态管理将搜索字段值存储在一个状态中,然后在List.vue组件中或任何您想要的位置直接访问它。

相关问题