Nativescript-vue $emit 未按预期工作答案

【问题标题】：Nativescript-vue $emit not working as expectedNativescript-vue $emit 未按预期工作
【发布时间】：2019-04-25 12:10:25
【问题描述】：

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

不确定要尝试什么，Widget 的点击事件正在被调用，但没有被发送到它的父级，因为它没有调用 console.log

我在这里错过了什么？

父.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 的真正初学者。

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

【问题讨论】：

标签： javascript vue.js vuejs2 nativescript nativescript-vue

【解决方案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

【讨论】：

【解决方案2】：

你必须像这样处理父组件中发出的事件：

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

并添加方法removeWidget如下：

     methods: {
        addWidget() {
            ....
           },
         removeWidget(name){
             console.log('removing widget');
            this.widgets.forEach( (widget,i ) => {
                if(widget.name === name){
                    this.widgets.splice(i,1);
                }
            })
          }
        }

【讨论】：