如何在兄弟提交上呈现vuejs组件
如何在兄弟提交上呈现vuejs组件
提问于 2020-05-08 05:42:10
我有以下代码
<body>
<div class="content" id="app">
<file-management></file-management>
<attachment-list></attachment-list>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>FileManagement组件代码：
<template>
<div>
<button type="button" @click="storeList()">
Save
</button>
</div>
</template>
<script>
export default {
methods: {
storeList: function () {
axios.post('/list', this.data, config)
.then(() => {
// on save I want to be able to load the table again that is found in AttachmentList component
});
},
}
}
</script>AttachmentList组件代码：
<template>
<div>
<tr v-for="attachment in attachments" :key="attachment.id">
<td>{{ attachment.name }}</td>
</tr>
</div>
</template>
<script>
export default {
data() {
return {
attachments: []
}
},
methods: {
getList() {
axios.get(`/list`)
.then((data) => {
this.attachments = data;
});
}
}
}
</script>我想要做的是，当我单击“另一个组件中的保存”(在post请求完成后)时，我希望能够加载列表的表。我怎样才能做到这一点呢？
回答 2
Stack Overflow用户
回答已采纳
发布于 2020-05-08 05:49:51
最简单的方法是让您的FileManagement组件发出父级可以侦听的事件，然后触发AttachmentList#getList()方法。
例如
// in AttachmentList
methods: {
async storeList () {
await axios.post('/list', this.data, config)
this.$emit('list-updated')
}
}在父模板中
<file-management @list-updated="$refs.list.getList()"></file-management>
<attachment-list ref="list"></attachment-list>Stack Overflow用户
发布于 2020-05-08 05:49:34
我就是这样做的。
- 为兄弟姐妹创建父组件。
- 以单击按钮的状态向其添加一个布尔数据成员(标志)。单击按钮时，
- 从
FileManagement发出信号。 - 在父组件中捕获此信号以设置标志。
- 将此标志传递给
AttachmentList组件作为支柱。H 212H 113在v-if中使用此标志显示/隐藏表。H 215F 216
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61672744
复制相关文章
相似问题
腾讯云开发者
