删除一个 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 的 prop 传递给它，看起来像这样：

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

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

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

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

deleteRow() {
    this.delete();
}

我是否需要 $emit 向父级发送包含行索引的内容才能将其删除？这让我疯狂。所有示例似乎都表明这样做很容易，但在您有想要删除自己的子组件的情况下并非如此。

Answer 1

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

如果允许子组件删除自己，那么父组件上的rows 数据与渲染的 DOM 视图之间将不匹配。

这里有一个简单的 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属性可用于在子组件接收到delete-row事件时调用deleteThisRow方法。