Nativescript-vue $emit 未按预期工作

Posted 2023-04-13

【中文标题】Nativescript-vue $emit 未按预期工作

【英文标题】：Nativescript-vue $emit not working as expected

【发布时间】：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

【参考方案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);
                
            )