如何在Nuxt中删除动态组件.js

Question

我在 Vue.js 中使用了 Nuxt.js。我添加了这样的动态组件。

// pages/index.vue
<template>
<div class="filter-container">
<component v-for="item in buttons" :is="item" :key="item.id" :buttons="buttons" />
<span class="add-search" @click="add">ADD</span>
</div>
</template>
<script>
const dynamicComponentFilter = () => import("@/components/ProductFilter");
export default {
data() {
return {
buttons: []
}
},
methods: {
add() {
this.buttons.push(dynamicComponentFilter);
}
}
}
</script>

并在组件中

// components/productFilter.vue
<template>
..........
<span class="del" @click="delQuerysToStore(item)">del</span>
..
..
..
</template>
<script>
export default {
props: ["buttons", "item"],
methods: {
delQuerysToStore(item) {
this.buttons.splice(this.buttons.indexOf(item), 1);
}
}
}
</script>

喜欢这个。 当我单击添加按钮时，然后每次单击都出现组件。 当我单击 del 按钮时，然后删除最后一个组件... 我想删除与我单击的按钮对应的组件。

为什么没有工作索引？我看console.log(this.buttons.indexOf(item));，它确实有效！当我单击第二个按钮时，出现索引 1。但是为什么在组件上不起作用？

Answer 1

我认为您无权访问components/productFilter.vue中的this.buttonsthis.buttons因为它的范围仅限于其组件实例，并且在 props 中提供它并期望其父级具有反应性不是一个好的做法。我建议您通过 propsitem-id在其中传递此动态组件的索引，然后在delQuerysToStore()中发出一个事件，然后删除父pages/index.vue中的组件。例：

// components/productFilter.vue
props: {
itemId: {
type: Number,
default: 0
}
},
methods: {
delQuerysToStore(item) {
this.$emit('delete', this.itemId)
}
}
}

// pages/index.vue
<template>
<div class="filter-container">
<component v-for="(item, index) in buttons" :is="item" :key="item.id" :buttons="buttons" @delete="deleteComponent" :item-id="index"/>
<span class="add-search" @click="add">ADD</span>
</div>
</template>
<script>
const dynamicComponentFilter = () => import("@/components/ProductFilter");
export default {
data() {
return {
buttons: []
}
},
methods: {
add() {
this.buttons.push(dynamicComponentFilter);
},
deleteComponent(itemId) {
this.buttons.splice(itemId, 1)
}
}
}
</script>

一般来说，这是标准和良好做法：数据向下 ->操作向上。您向下向较低级别的组件提供数据，但较低级别的组件向其父级发出事件，因此组件之间的通信工作。