28.VUE自定义事件--$emit()

最新推荐文章于 2023-03-24 18:07:48 发布

休息休息夏

最新推荐文章于 2023-03-24 18:07:48 发布

阅读量450

点赞数

分类专栏： VUE基础学习文章标签： vue

本文链接：https://blog.csdn.net/qq_42881159/article/details/117383597

版权

VUE基础学习专栏收录该内容

31 篇文章 0 订阅

订阅专栏

VUE自定义事件--$emit

自定义事件：

当我们需要对子组件中某些特定行为进行监控时，需要让子组件使用$emit来发出通知。
$emit发送事件通知时，可以从子组件携带参数到父组件，实现子级向父级通信的功能。
注意：
此方法只用于子组件向父组件发送消息（数据）
隔代组件或兄弟组件间通信此种方式不合适

案例：
在这里插入图片描述

在这里插入图片描述

<body>
<div id="app">
<!--    <son></son>-->
    <parent></parent>
</div>
</body>
<script>
    let son = {
        template:'<div><button @click="getCount">{{count}}</button></div>',
        data(){
            return{
                count:0
            }
        },
        methods: {
            getCount(){
                this.count++;
                if (this.count>10){
                    this.$emit('cha');
                }
            }
        }
    }

    let parent = {
        template: '<div><p>{{total}}</p><son @cha="getTotal"></son></div>',
        components:{
            son
        },
        data(){
            return{
                total:0,
            }
        },
        /*getTotal是父级的函数*/
        methods:{
            getTotal(){
                this.total++;
            }
        }
    }

    let vm = new Vue({
        el: "#app",
        data: {},
        methods: {},
        components: {
            parent
        }
    });
</script>

休息休息夏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
28.VUE自定义事件--$emit()

VUE自定义事件--$emit自定义事件：当我们需要对子组件中某些特定行为进行监控时，需要让子组件使用$emit来发出通知。$emit发送事件通知时，可以从子组件携带参数到父组件，实现子级向父级通信的功能。注意：此方法只用于子组件向父组件发送消息（数据）隔代组件或兄弟组件间通信此种方式不合适案例：<body><div id="app"> <parent&
复制链接

扫一扫