Vue父组件与子组件传递事件/调用事件

最新推荐文章于 2025-06-10 09:57:51 发布

liyuling52011

最新推荐文章于 2025-06-10 09:57:51 发布

阅读量1.5w

点赞数 2

本文详细介绍了Vue.js中不同组件间通信的三种主要方式：父组件向子组件传递事件、子组件调用父组件事件及平行组件间通过事件调度器通信。通过具体代码示例，展示了如何使用props、this.$emit和this.$refs实现组件间的数据和事件传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、Vue父组件向子组件传递事件/调用事件

复制代码

<div id="app">
    <hello list="list" ref="child"></hello>
    <br />
    <button v-on:click="myclick">调用子组件中的方法</button>
</div>
<template id="myT"></template>

<script>
    Vue.component('hello', {
        template: '#myT',
        methods: {
            clickme: function () {
                alert("dd");
            }
        }
    });
    var app=new Vue({
        el: '#app',
       
        methods: {
            myclick: function () {
                this.$refs.child.clickme();
            }
        }
    });
</script>

复制代码

如果传递参数，可以使用 props数据

2.子组件调用父组件事件

复制代码

<div id="app">
    <hello list="list" v-on:wzhclick="wzhclick"></hello>
</div>
<template id="myT">
    <button v-on:click="childclick">调用父组件的方法</button>
</template>
<script>
    Vue.component('hello', {
        template: '#myT',
        methods: {
            childclick: function () {
                this.$emit('wzhclick', {a:1,b:2});
            }
        }
    });
    var app=new Vue({
        el: '#app',
        methods: {
            wzhclick: function (data) {
                alert("我是父组件,参数"+data.a+";"+data.b);
            },
        }
    });
</script>

复制代码

子组件通过this.$emit()派发事件，父组件利用v-on对事件进行监听，实现参数的传递

3.两平等组件间的调用

复制代码

@{
    ViewBag.Title = "Index";
}
<link href="~/Content/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/css/font-awesome.min.css" rel="stylesheet" />
<script src="~/Content/js/jquery-1.8.2.min.js"></script>
<script src="~/Content/js/bootstrap.min.js"></script>
<script src="~/Scripts/vue.min.js"> </script>
<script src="~/Scripts/axios.min.js"></script>
<style>

</style>

<div id="app">
    <wzh></wzh>
    <zl></zl>
</div>
<script>
    var Event = new Vue();//事件调度器
    Vue.component('wzh', {
        template: '<div>wzh:<input v-on:keyup="isay" v-model="msg">{{msg}}</div>',
        data: function () {
            return {
                msg:''
            }
        },
        methods: {
            isay: function () {
                Event.$emit("wzhsay", this.msg);
            }
        }

    });
    Vue.component('zl', {
    template:'<div>wzh说了：{{wzhmsg}}</div>',
    data: function () {
        return {
            wzhmsg:'',
        }
    },
    mounted: function () {
        var me = this;
        Event.$on("wzhsay", function (data) {
            me.wzhmsg = data;
        });
    }
    });
    var app=new Vue({
        el: '#app',
    });
</script>

复制代码

new一个调度器来Event来完成，在mounted中监听事件，另一个组件中调用Event.$emit来调用此事件完成调度。