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

Posted 2023-02-23

【中文标题】使用 vue.js 和 laravel 从子级向父级发送数据

【英文标题】：emitting data from chiled to parent using vue.js and laravel

【发布时间】：2020-07-01 16:11:21

【问题描述】：

我是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>

【参考方案1】：

你在这里发射：

this.$emit('userData', index)

这意味着您的活动名称是'userData'。这就是你必须在父母那里听到的。但是如果你检查你的父母，你正在听这样的事件：

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

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

v-on:userData="userData"

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

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

【讨论】：

请帮助我详细了解错误在哪里以及如何修复

我改变了 don:userData="userData(payload)" 但我没有工作

您的父 userData 方法是否在您发出时在控制台中记录一些内容？

更改后我发现此错误 v-on 处理程序中的错误：“ReferenceError: setUserData is not defined”

好的，我明白了，这是另一个问题，但与事件无关了。现在成功发出事件并调用处理程序。您现在可以进一步调查吗？