javascript - Nativescript-vue $emit 未按预期工作

Question

我试图让一个简单的子组件将事件传递给它的父组件，但它没有被调用。

不知道还能尝试什么，小部件的点击事件正在被调用，但没有发送到它的父级，因为它没有调用 console.log

我在这里缺少什么？

Parent.vue:

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <ScrollView>
            <StackLayout class="home-panel">
                <Widget v-for="widget in widgets" :widgetName="widget.name"/>
                <Button text="Add widget" class="btn btn-primary" @tap="addWidget" />
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
    import Widget from "./Widget";
    export default {
        data() {
            return {
                widgets: [{
                    name: "widget1"
                }, {
                    name: "widget2"
                }]
            };
        },
        components: {
            Widget
        },
        methods: {
            addWidget() {
                this.widgets.push(
                    {
                        name: `widget${this.widgets.length+1}`
                    }
                )
            },
            removeWidget(name){
                console.log('removing widget');
                this.widgets.forEach( (i, widget) => {
                    if(widget.name === name){
                        this.widgets.splice(i,1);
                    }
                })
            }
        }
    };
</script>

Widget.vue:

<template>
    <Button :text="widgetName" @tap="removeThis">
</template>

<script>
    export default {
        props: {
            widgetName: "",
        },
        methods: {
            removeThis(){
                console.log('emiting event to remove widget', this.widgetName);
                this.$emit("removeWidget", this.widgetName);
            }
        }
    };
</script>

我是 vue 和 nativescript 的真正初学者。

Playground 示例:https://play.nativescript.org/?template=play-vue&id=9dPpDZ&v=3

Answer 1

您的代码中缺少两件事，

首先，您应该处理从父组件发出的事件

<Widget v-for="widget in widgets" :widgetName="widget.name"
                @removeWidget="removeWidget" />

其次，在 forEach 语法中，回调的第一个参数是 widget，第二个参数是索引 (i)，

this.widgets.forEach((widget, i) => {
                if (widget.name === name) {
                    this.widgets.splice(i, 1);
                }
            });

Updated Playground