使用 vue.js 和 laravel 从孩子向 parent 发送数据

Question

我是 vue.js 中的新成员我的测试组件是 child 并且显示数据组件是 parent 我的问题是当我从 child 发出数据到 parent 它已成功发出，但是当我通过 @click="showusersdata1(listdata.id) 在 parent 中显示数据时，我得到空数据，如附加图像，那么如何显示用户数据这是我的代码 showdata.vue

<template>
        <div>


            id={{setUserData.id}},
            name={{setUserData.name}}
            email={{setUserData.email}}
            <test v-on:showusersdata1="userData($event)"></test>


        </div>
</template>


<script>

    import MyHome from "./home";
   // let Test=require('./components/test.vue').default
    import test from "./test"
    export default {

        // components: {MyHome},
        name: "showData",
        data:function () {
            return{
                setUserData:{}
            }
        },
        components:{
            test

        },
        methods:{
            userData:function (passedata) {
            console.log(passedata)
           //  this.setUserData={}
                this.setUserData= this.setUserData.push(passedata)

            }
        }
    }
</script>

test.vue

<template>
    <div  class="row">
        <div class="col-8">
<h1>this is test components1</h1>
            <!-- List group -->
            <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2">
                <div class="input-group-append">
                    <button class="btn btn-outline-secondary" type="button" id="button-addon2">Button</button>
                </div>
            </div>
            <div class="list-group" id="myList" role="tablist">

                <a  v-for  ="(listdata,key) in list"  class="list-group-item list-group-item-action  active" data-toggle="list" href="#home" role="tab">
                    <ul class="test">
                        <i class="fas fa-trash" aria-hidden="true"></i>
                        <i class="fas fa-edit"></i>
                        <i  @click="showusersdata1(listdata.id)" class="fas fa-eye"></i>
                    </ul> {{listdata.name}}</a>



            </div>


        </div>
        <h1>this is cchiled show data coponent</h1>


    </div>

</template>


<script>





    import ShowData from "./showdata";

    export default {

        name: "Test",
        components:{
            ShowData

        },
        data: function () {
            return {
                list:{},
                errors:{},


            }
        },

        mounted(){
            axios.post('/getAllData')
                // .then((response) =>this.list=response.data )
                .then((response) =>{
                    this.list=response.data

                } )

                .catch((error) =>this.errors=error.response.data.errors )

        },
        methods:{
            showusersdata1:function (key) {
              var index = this.list.find( ({ id }) => id == key );

                this.$emit('userData', index)
            }
        }




    }
</script>
<style scoped>
    .test{
        float:right
    }
</style>

Answer 1

你在这里发射：

this.$emit('userData', index)

这意味着您的活动名称是 'userData'。这就是你在 parent 中必须要听的内容。但是如果你检查你的 parent，你正在收听这样的事件：

v-on:showusersdata1="userData($event)"

这意味着您正在尝试收听未触发的 'showusersdata1' 事件。 您将 child 中的方法名称与您的事件名称混淆了 。您可以像这样收听您的活动，而不是您所做的：

v-on:userData="userData"

事件监听器的命名也是一种约定俗成的做法，就是在事件监听器前面加"on"，例如：

活动名称是'userDataReceived'
事件侦听器将是 onUserDataReceived

使用 vue.js 和 laravel 从孩子向 parent 发送数据

emitting data from chiled to parent using vue.js and laravel

javascript

vue.js

vuejs2

vue-component

vue-directives