动态更新道具

Question

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

数据作为 props (":list") 从模板 A 传递到自定义组件

模板 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")，以便自定义组件中的 props 自动反映该更新。

谢谢。

Answer 1

有两种实现方式，一种是使用状态管理库（推荐Vuex），另一种是使用事件。

下面是一个使用事件的例子：

创建一个包含以下内容的文件event-bus.js

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

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

记得导入event-bus文件

监听其他组件中的事件

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

动态更新道具

Dynamically update props

vue.js

quasar