时间戳

首页 > 解决方案 > vue 发出事件并在父组件中接收

javascript - vue 发出事件并在父组件中接收

问题描述

嗨，我有两个组件，我在一个组件中得到响应，需要传递并推送父组件的数组。下面是我的代码。我没有收到回复。在Userstatuscomponent.vue我的方法很少，无论我得到什么响应，我都想将它传递给UserComponent.vue并将其推送到 users[] 数组中。我想我做错了什么。请帮我。用户组件.vue

<template>
<div>
        <Status v-on:updateStatus="receiveResponse(userData)"></Status >
    <div class="card" >
        <div class="card-header">
            <div class="card-body" v-for="user in users.data" >

            </div>
        </div>
    </div>
</div>
</template


<script type="application/javascript">
import Status from '../components/UserstatusComponent.vue' 

export default {
    data() {
        return {
            users: [],
        };
    },
    created() {
        this.getResult();
    },

    components: {
        Filter
    },
    methods: {
        getResult() {
            axios
                .get("/api/result")
                .then(response => {
                   
                        this.users = response.data;
                   
                })
                .catch(error => console.log(error));
        },
        receiveResponse(userData){
            this.users =  userData
        },
//HERE I HAVE RECEIVED THE EVENT and update users array
        receiveResponse(user){
            this.users = user
        },
 
    }
};
</script>
Now I have some method in UserStatusComponent and I want to pass the response from this component to UserComponent.vue

UserstatusComponent.vue
<template>
            <div class="">
                        <a
                            @click.prevent="updateOne"
                            >update one</a
                        >
                        <a
                            @click.prevent="updateTwo"
                          
                            >update two</a
                        >
                       
                       
                    </div>
                </div>
            </div>
</template>

<script>
export default {
    data(){
        return{
            
        }
    },
    updateOne() {
            axios
                .get("/api/result", {
                    params: {
                        status: "bad"
                    }
                })
                .then(response => {
                    this.$emit('updateStatus',response.data);
                });
        },
        updateTwo() {
            axios
                .get("/api/result", {
                    params: {
                        stauts: "good"
                    }
                })
                .then(response => {
                    this.$emit('updateStatus',response.data);
                });
        },
        
}
</script>

标签： javascriptvue.jsvuejs2

解决方案

当你想通过emit，在父组件中传递数据时，你不必在函数中放置参数。这是一些代码更新（未测试）

v-on:updateStatus="receiveResponse"

updateStatus函数将具有参数，尽管这是子组件通过的参数$emit。

receiveResponse(userData){
  this.users =  userData
}

<div class="card-body" v-for="user in users.data" > 中应该有可迭代的v-for。怎么样v-for="user in users"？

推荐阅读