我的应用程序的导航栏组件中有一个搜索字段,我想将其与数据表连接,它们位于其他文件中。
我不确定我是否必须对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"
>
在其他情况下,我把它们放在同一个文件中,但这次不是,我不知道搜索字段如何从表中读取数据。
1条答案
按热度按时间cgh8pdjw1#
根据您在帖子中添加的解释,
Navbar.vue
和List.vue
是兄弟。如果是,您可以通过两种方式将搜索字段值传递给列表组件**:**
1.通过使用
emit
从Navbar
组件传递给父组件,然后通过props
从父组件将该值传递给列表组件。1.使用
vuex
存储状态管理将搜索字段值存储在一个状态中,然后在List.vue
组件中或任何您想要的位置直接访问它。