删除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视图之间将存在不匹配。

这是一个简单的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>

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