前面已经有两种更新的方式
但是都不是最合适的 影响效率。
我们可以试用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是可以是任意字符串的 就是为了区分事件名称。