vue.js - 删除一个 Vue 子组件

Question

我真的坚持这个。我创建了一个由子组件组成的 Vue (2.0) 组件，它都被 Webpacked 等。例如，这是父组件:

<div>

    <h1>This is just a title for lulz</h1>

    <rowcomponent v-for="row in rows" :row-data="row"></rowcomponent>

</div>

它有一个 rows 传递给它，看起来像这样:

rows: [{ sometext: "Foo"} , { sometext: "Bar" }]

所以我的行组件看起来像这样:

<div>{{ this.sometext }} <button @click="deleteRow">Delete Row</button></div>

我觉得在 rowcomponent 上设置一个方法应该很容易，就像这样:

deleteRow() {
    this.delete();
}

我是否需要向父级发送带有行索引的内容才能将其删除？这让我疯狂。所有示例似乎都表明这很容易做到，但如果您有想要删除自身的子组件，则不然。

Answer 1

是的，子组件不能删除自己。原因是 rows 的原始数据保存在父组件中。

如果允许子组件删除自身，则父组件的 rows 数据与呈现的 DOM View 之间将不匹配。

这里有一个简单的jsFiddle供引用:https://jsfiddle.net/mani04/4kyzkgLu/

如您所见，有一个保存数据数组的父组件，以及通过$emit 发送事件以删除自身的子组件。父级使用 v-on 监听删除事件，如下所示:

<row-component
    v-for="(row, index) in rows"
    :row-data="row"
    v-on:delete-row="deleteThisRow(index)">
</row-component>

v-for提供的index属性可以用来调用deleteThisRow方法，当delete-row 从子组件接收到事件。