javascript - 将数据传递给 Vuejs 中的另一个组件?
问题描述
我有这个过滤函数(属于一个 List 组件),然后我需要将结果传递给另一个组件(它们是兄弟)来填充我的 DataTable(父组件):
async filtroVariaveis () {
try {
this.loading = true;
this.variaveis = await this.variaveisService.listVariables();
let idGrupos = null;
if (!this.grupos[0] && this.maquinaSelecionada[0]) {
idGrupos = this.gruposOpcoes.map(m => m.id);
}
if (!this.grupos[0] && !this.maquinaSelecionada[0] && this.areaSelecionada[0]) {
const idMaquinas = this.maquinasOpcoes.map(m => m.id);
const grupo = this.gruposOpcoes.filter(a => idMaquinas.includes(a.id_maquina));
idGrupos = grupo.map(a => a.id);
}
if (this.grupos[0]) {
idGrupos = this.grupos.map(g => g.id);
}
const tipos = this.tipoVariavel.map(t => t === "Analógica" ? t = "ANALOGICA" : "DIGITAL");
const tag = this.tagInput || this.variaveis.map(t => t.tag);
const descricao = this.descricaoInput || this.variaveis.map(d => d.descricao);
this.filtroAplicado = ((await this.variaveisService.listVariables(idGrupos, tipos, tag, descricao)) || []);
} catch (err) {
console.log(err);
}
this.variaveisService 是与我的 API 通信的 Axios 服务。
我的列表组件:
<template>
<two-cards>
<template #header>
<h4 class="card-title">Filtros</h4>
<slot>
<router-link
to="/variaveis/add"
class="btn btn-success text-white align-self-center"
>
Adicionar variável
</router-link>
</slot>
</template>
<template #one>
<form class="mt-2" @submit.prevent="filtroVariaveis">
<div class="form-row">
<div class="col form-group col-sm-6">
<label for="data-final">Tag: </label>
<b-form-input
v-model="tagInput"
id="data-final"
input-class="bg-white"
></b-form-input>
</div>
<div class="col form-group col-sm-6">
<label for="data-inicial">Descrição: </label>
<b-form-input
v-model="descricaoInput"
id="data-inicial"
input-class="bg-white"
></b-form-input>
</div>
</div>
<div class="form-row">
<div class="form-group col-sm-3">
<label class="mt-2">Área </label>
<vue-multi-select
class="multi-100"
v-model="areaSelecionada"
@input="checarArea"
search
historyButton
:options="{ multi: false, labelName: 'nome' }"
:selectOptions="areasOpcoes"
:btnLabel="() => areaSelecionada[0] ? areaSelecionada[0].nome : 'Selecione'"
/>
</div>
<div class="form-group col-sm-3">
<label class="mt-2">Máquina </label>
<vue-multi-select
class="multi-100"
v-model="maquinaSelecionada"
:disabled="!areaSelecionada[0]"
@input="checarMaquina"
search
historyButton
:options="{ multi: true, labelName: 'nome' }"
:selectOptions="maquinasOpcoes"
:btnLabel="() => customLabel(maquinaSelecionada)"
/>
</div>
<div class="form-group col-sm-3">
<label class="mt-2">Grupo </label>
<vue-multi-select
class="multi-100"
v-model="grupos"
search
historyButton
:options="{ multi: true }"
:selectOptions="gruposOpcoes"
:btnLabel="() => customLabel(grupos)"
/>
</div>
<div class="form-group col-sm-3">
<label class="mt-2">Tipo</label>
<vue-multi-select
class="multi-100"
v-model="tipoVariavel"
search
historyButton
:options="{ multi: true }"
:selectOptions="tiposOpcoes"
:btnLabel="() => customLabel(tipoVariavel)"
/>
</div>
</div>
<div class="d-flex justify-content-end tcs-card-footer-action">
<button
class="btn btn-success tcs-btn"
type="search"
>
<SearchIcon />
</button>
</div>
</form>
</template>
<template #two>
<GenericList
title="variáveis"
:linhas="linhas"
data-table-state-name="Variável"
add-route="add_variavel"
edit-route="edit_variavel"
:cols="['#', 'Tag', 'Descrição', 'Tipo']"
:cols-name="['id', 'tag', 'descricao', 'tipo']"
:cols-map="i => [i.id, i.tag, i.descricao, i.tipo]"
/>
</template>
</two-cards>
</template>
computed: {
linhas () {
return this.lista.map((row) => ({
href: { name: this.editRoute, params: { id: row.id }},
cols: this.colsMap(row)
}));
}
},
我的 GenericList 组件,我需要在其中放置这些数据:
<template>
<div>
<DataTable
scroll
:async="pagination"
:loading="loading"
:colunas="parsedCols"
:linhas="linhas"
:errMsg="errMsg"
:state="dataTableState"
@state-change="setStateDataTable"
>
<template #results-page v-if="pagination">
<select
class="custom-select ml-1"
:value="results"
@input="changeResults"
data-cy="resultados-pagina"
>
<option value="10">10 por página</option>
<option value="20">20 por página</option>
<option value="50">50 por página</option>
<option value="100">100 por página</option>
<option v-if="canShowAllResults" value="-1">
Mostrar todos
</option>
</select>
</template>
<template v-for="col in cols" v-slot:[col]="{ value, item }">
<slot :name="col" :value="value" :item="item">
<router-link
v-if="value && value.rota && value.nome && value.id"
:to="{ name: value.rota, params: { id: value.id } }"
title="Ir para a edição"
>
<edit-icon size="16" /> {{ value.nome }}</router-link
>
</slot>
</template>
</DataTable>
<Paginator
:page="page"
:pages="pages"
:count="count"
:disabled="loading"
:first="first"
:last="last"
@paginate="paginate"
/>
</div>
</template>
props: {
loading: Boolean,
title: {
type: String,
required: true
},
addRoute: {
type: String,
required: true
},
editRoute: {
type: String,
required: true
},
dataTableStateName: {
type: String,
required: true
},
lista: {
type: Array
},
linhas: {
type: Array
},
cols: {
type: Array,
required: true
},
colsMap: {
type: Function,
required: true
},
colsName: {
type: Array,
required: true
},
canShowAllResults: {
type: Boolean,
default: false
},
showInativos: {
type: Boolean,
default: false
}
},
data () {
return {
errMsg: "",
pagination: false,
page: 0,
pages: 1,
results: 20,
first: 0,
last: 0,
count: 0
};
},
computed: {
dataTableState () {
return this.$store.state.dataTables[
"dataTable" + this.dataTableStateName
];
},
parsedCols () {
return this.cols.map((c, idx) => this.colsName[idx] ? c : { value: c, sortable: false }
);
}
},
我不知道如何填写这个数据表,有人可以帮助我吗?
解决方案
您可以使用$emit
and$on
在兄弟组件之间传递数据。请看这个例子
当您将数据传递到另一个组件时,您必须设置此行:
this.$root.$emit('eventing', data);
之后,您可以像以下示例一样将数据接收到目标组件中:
1)
mounted() {
this.$root.$on('eventing',this.functionName);
}
或者
2)
mounted() {
this.$root.$on('eventing', data => {
console.log(data);
});
}
请注意,你最好设置$off
成目标组件
1)
beforeDestroy() {
this.$root.$off("eventing", this.functionName);
}
或者
2)
beforeDestroy() {
this.$root.$off("eventing");
}
你可以在参数中找到你需要的数据this.functionName
推荐阅读
- php - 如何在自定义简码中显示简单的数字下载 $atts?
- r - 使用 for 循环和 ggplot 绘制小倍数
- vue.js - nuxt 页面组件的 beforeDestroy 钩子
- python - 在不清除滑块的情况下清除 Matplotlib 图
- python - 结合数据框移动行。ValueError:无法从重复的轴重新索引
- javascript - JavaScript Rock, Paper, Scissors 游戏逻辑
- javascript - 单击按钮时掉落五彩纸屑效果
- vba - DoCmd.RunSavedImportExport - 在旧计算机上使用时不返回任何内容,但适用于新计算机。内存管理?
- flutter - Flutter Widgets 绑定观察者
- javascript - JS 或 jQuery:如何在事件侦听器接收到 JSON 对象后自动重定向到 url