21$emit与$on

最新推荐文章于 2025-07-08 16:40:57 发布

原创最新推荐文章于 2025-07-08 16:40:57 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #$emit #$on

Vue 专栏收录该内容

21 篇文章

订阅专栏

博客介绍了Vue中$emit与$on的应用场景，包括在子组件中触发父组件定义的方法，以及通过定义中介Vue对象在兄弟组件中传值，为Vue开发提供了实用的组件通信思路。

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

$e m i t 与$ on

$on $emit应用场景

子组件中触发在父组件中定义的方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="./node_modules/vue/dist/vue.min.js" type="text/javascript"></script>
<script>
    let myButton = {
        template:`
        <button @click='showMsg'><slot></slot></button>
        `,
        methods:{
            showMsg(){
                this.$emit('show');
            }
        }
    }
     new Vue({
        el:"#app",
        template:`
        <div>
            <myButton @show='showMsg'>按我</myButton>
        </div>
        `,
        components:{
            myButton
        },
        methods:{
            showMsg(){
                alert("hahaha");
            }
        }
    })
 
</script>
</html>

定义一个中介vue对象，在兄弟组件中传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
</body>
<script src="./node_modules/vue/dist/vue.min.js" type="text/javascript"></script>
<script>
    let event = new Vue();
    let myButton = {
        template:`
        <button @click='showMsg'><slot></slot></button>
        `,
        methods:{
            showMsg(){
                event.$emit('show');
            }
        }
    }
    new Vue({
        el:"#app",
        template:`
        <div>
            <myButton>按我</myButton>
        </div>
        `,
        components:{
            myButton
        },
        mounted(){
            event.$on('show',()=>{
                alert("hahaha");
            })
        }
    })

</script>
</html>