Vue中的$emit $on $once $off的使用

发表于 | 分类与
字数统计: 380 字 | 阅读时间大约 1 分钟

最近的大事就是香港暴乱,做好自己就是对祖国的最好支持！

1.如果对以上方法还不了解的可以点击传送门大致了解一下😯
2.都说实践出真知，复制以下代码，动动小手点击下就全懂啦！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<body>
    <div id="app">
        <p>{{msg}}{{count}}</p>
        <children-component @aa="aa"></children-component> <br/>
        <button @click="removeClick">父组件按钮使用$off移除$on监听</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var bus = new Vue()
        var children = {
                data(){
                    return{
                        data:""
                    }
                },
                methods: {
                    childrenClick(){
                        bus.$emit('aa','子组件通过emit发送过来的数据')
                    },
                    hanldClick(){
                        bus.$emit('bb','子组件用来探索$once')
                    }
                },
            template:`<div>
                <button @click="childrenClick">子组件使用$emit发送数据，父组件使用$on监听</button><br/><br/> 
                <button @click="hanldClick">子组件使用$emit发送数据，父组件使用$once监听只能触发一次</button>
            </div>`
        }
        var vm = new Vue({
            el:"#app",
            data:{
                msg:'',
                count:0
            },
            components:{
                'children-component':children
            },
            methods:{
                aa(s){
                    console.log(s)  
                },
                removeClick(){
                    bus.$off('aa')
                }
            },
            mounted(){
                bus.$on('aa',(val)=>{
                    this.msg = val
                    this.count++
                })
                bus.$once('bb',(val)=>{
                    console.log(val)
                })
            }
        })
    </script>
</body>
-------------本文结束感谢您的阅读-------------