Vue 实例身上的方法事件的订阅、解绑、触发

最新推荐文章于 2024-05-04 22:23:25 发布

鲸是鲸鱼的鲸

最新推荐文章于 2024-05-04 22:23:25 发布

阅读量570

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_44195250/article/details/97393156

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<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>
</html>
<script src="vue.js"></script>
<script>
    var vm = new Vue();

    function fn1(val){
        console.log(111,val)
    }

    function fn2(val){
        console.log(222,val)
    }

    function fn3(val){
        console.log(333,val)
    }


    vm.$on("handle",fn1);
    vm.$on("handle",fn2);
    vm.$on("handle",fn3);

    vm.$on("abc",fn1);
    vm.$on("abc",fn2);
    vm.$on("abc",fn3);

    // vm.$once("handle",fn1);
    // vm.$once("handle",fn2);
    // vm.$once("handle",fn3);


    //vm.$off("handle",fn1)
    vm.$emit("handle","abc")
    vm.$emit("abc","abc")
   




/*
vm.$on
    事件的订阅
    参数1：事件名称
    参数2：事件函数
vm.$once
    事件的订阅
    参数1：事件名称
    参数2：事件函数
vm.$off
    事件的解绑
    参数1：事件名称
    参数2：[事件函数]  如果存在则解绑对应事件 如果不存在则解绑所有
vm.$emit
    事件的触发
    参数1：事件名称
    参数2: [需要传递的参数]





    

*/
</script>

在这里插入图片描述

鲸是鲸鱼的鲸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 实例身上的方法事件的订阅、解绑、触发

<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" conte...
复制链接

扫一扫