Question

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

不知道还有什么尝试，该Widget的tap事件正在被调用，但没有发送给它的父对象，因为它没有调用console.log

我在这里想念什么？

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

Widget.vue：

subprojects {
  afterEvaluate {project ->
    if (project.hasProperty("android")) {
        android {
            compileSdkVersion 27
            buildToolsVersion "27.1.1"
        }
    }
  }
}

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

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

Answer 1

您必须在父组件中处理发出的事件，如：

    ....
  <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);
                }
            })
          }
        }

Answer 2

您在代码中遗漏了两件事，

首先，您假设要处理父组件发出的事件

<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

Nativescript-vue $ emit无法正常工作

2 个答案: