删除Vue子组件

我真的被这个问题困扰了。我创建了一个由子组件组成的 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();
}

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

是的，子组件无法删除自身。原因是因为原始数据为rows保存在父组件中。

如果允许子组件删除自身，那么之间就会出现不匹配rows父视图和渲染的 DOM 视图上的数据。

这是一个简单的jsFiddle供参考：https://jsfiddle.net/mani04/4kyzkgLu/ 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>

The index财产提供者v-for可以用来调用deleteThisRow方法，当delete-row从子组件接收事件。