使用 vue.js 和 laravel 从子级向父级发送数据

Question

我是vue.js 的新成员，我的测试组件是子组件，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'。这就是你必须在父母那里听到的。但是如果你检查你的父母，你正在听这样的事件：

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

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

v-on:userData="userData"

通过在事件侦听器前面添加“on”来命名事件侦听器也是一种约定，例如：

• 事件名称是'userDataReceived'
• 事件监听器是onUserDataReceived