Question

如下所述，我的应用程序具有一个带有自定义组件的模板。

数据从模板A作为道具（“：list”）传递到自定义组件

模板A：

<template>
...
<custom-component     
    v-for="list in listGroup" 
    :key="list.id_list" 
    :list="list"                      
/>
</template>

<script>
    export default {        
        data() {
            return {
             listGroup: []
            };
        },
        components: {
            'custom-component':require("...").default
        }
</script>

自定义组件

<template>
...
</template>

<script>
    export default {
        props:["list];
        ...
    }
</script>

要解决的问题：

新项目将添加到作为道具发送的列表中。

我需要动态更新列表（：list =“ list”），以便自定义组件中的道具自动反映该更新。

谢谢。

Answer 1

有两种方法可以实现一种方法是使用状态管理库（建议使用Vuex），另一种方法是使用事件。

以下是使用事件的示例：

创建具有以下内容的文件event-bus.js

import Vue from "vue";
export const EventBus = new Vue();

然后在您要更新list的组件中使用此EventBus.$emit('eventName', data);

记住要导入事件总线文件

在其他组件中监听事件

EventBus.$on('eventName', function (details) {
    //update list here
});

动态更新道具

1 个答案: