删除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以下方法侦听delete事件:

<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.