Question

我有一个（ ~~anonymous？~~动态）组件，用于呈现数组中的列表。当我将其他元素推入数组时，每个组件都会重新安装。

由于每个数组元素都包含一些“原始” html（包括其他与vuejs相关的东西（组件等）），所以我不能简单地使用v-html来显示内容，这是我发现处理“未解析”的唯一方法html是以下

<parent inline-template>
    <div>
        <component
            :key="row.id"
            v-for="row in rows"
            @mounted="childMounted"

            :is="{
                name: 'Child' + row.id,
                template: '<div>' + row.content + '</div>',
                mounted() {
                    this.$emit('mounted', row);
                },
            }"
        ></component>
    </div>
</parent>

Vue.component('parent', {
    data() {
        return {
            rows: []
        }
    },
    mounted() {
        this.rows.push({
            id: 1,
            content: 'foo'
        });

        this.rows.push({
            id: 2,
            content: 'bar'
        });

        setTimeout(() => {
            this.rows.push({
                id: 3,
                content: 'baz'
            });
        }, 1000);
    },
    methods: {
        childMounted(data) {
            console.log(`mounted ${data.id}`);
        }
    }
});

以上示例的console.log输出为：

mounted 1
mounted 2

从setTimeout开始的1000ms之后

mounted 1
mounted 2
mounted 3

此处的示例：https://jsfiddle.net/jdt0sxmv/

我希望在1000毫秒后只能“挂载3”。是否有可能阻止已经安装的组件重新渲染？

我已经尝试过使用“真实”组件描述上述示例，并且该示例按预期工作：

<parent inline-template>
    <div>
        <child
            :row="row"
            :key="row.id"
            v-for="row in rows"
            @mounted="childMounted"
        ></child>
    </div>
</parent>

Vue.component('child', {
    props: ['row'],
    template: `<p></p>`,
    mounted() {
        this.$emit('mounted', this.row);
    }
});

Console.log输出：

mounted 1
mounted 2

从setTimeout开始的1000ms之后

mounted 3

如何防止“重新安装” Vue.js组件

0 个答案: