提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

vue 父控件与父控件更新最好结决方案 EventBus(三)

Vue 更新 方案 控件 最好 EventBus
2023-09-27 14:27:48 时间

前面已经有两种更新的方式

但是都不是最合适的 影响效率。

我们可以试用EventBus来更新

<!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></title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
    <style>
        #app,
        button,
        input {
            font-size: 1.35em;
            margin: .5em;
        }
    </style>
</head>
<body>
<div id="app">
    <custom-elem1></custom-elem1>
    <custom-elem2></custom-elem2>

</div>
<script>
    //event bus
    var bus=new Vue();
    Vue.component('custom-elem1',{
        template:'    <div class="custom-elem1">\n' +
        '        <input type="text" v-model="msg"><button @click="submit">Submit</button>\n' +
        '    </div>',
        methods:{
            submit(){
                bus.$emit('receive',this.msg);
            }
        },
        data(){
            return{
                msg:'456',
            }
        }
    });

    Vue.component('custom-elem2',{
        template:'    <div class="custom-elem2">{{msg}}</div>',
        created(){
            var that=this;
            bus.$on('receive',function(newMsg){
            that.msg=newMsg;
            });
``
        },
        data(){
            return{
                msg:"123"
            };
        }
    });

    var app=new Vue({
        el:'#app'
    });
</script>
</body>
</html>

核心就是用$on 和$emit事件来接受和发送消息

第三方来发送和接受事件，就省去了节点的频繁更新

而这个第三方要注意

 可以看到我们使用发送

  bus.$emit('receive',this.msg);

接收

bus.$on('receive',function(newMsg){
            that.msg=newMsg;
            });

这个receive是可以是任意字符串的  就是为了区分事件名称。

相关文章