溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下vue $on指的是什么意思，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
vue $on是指一個方法，語法如“Event.$on('msg',function(msg){...}”，其中第一個參數是數據的名字，與發送時的名字對應，第二個參數是一個方法，要對數據的操作。
vue中$emit與$on
var Event = new Vue();
相當于又new了一個vue實例，Event中含有vue的全部方法；
Event.$emit('msg',this.msg);
發送數據，第一個參數是發送數據的名稱，接收時還用這個名字接收，第二個參數是這個數據現在的位置；
Event.$on('msg',function(msg){
接收數據，第一個參數是數據的名字，與發送時的名字對應，第二個參數是一個方法，要對數據的操作
/這里是對數據的操作
})例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>孫三峰--博客園</title>
<script type="text/javascript" src="js/vue2.0.3.js" ></script>
<script type="text/javascript">
//準備一個空的實例對象
var Event = new Vue();
var A={
template:`
<div style="border: 1px solid red; margin-bottom: 10px； width: 300px;">
<h5>A組件</h5>
<p>{{a}}</p>
<input type="button" value="把A數據給C" @click="send" />
</div>
`,
data(){
return {
a:'我是A里面的數據'
}
},
methods:{
send(){ //A發送數據
Event.$emit('a-msg',this.a);
}
}
};
var B={
template:`
<div style="border: 1px solid green; margin-bottom: 10px； width: 300px;">
<h5>B組件</h5>
<p>{{b}}</p>
<input type="button" value="把B數據給C" @click="send" />
</div>
`,
data(){
return {
b:'我是B里面的數據'
}
},
methods:{
send(){
Event.$emit('b-msg',this.b);
}
}
};
var C={
template:`
<div style="border: 1px dotted green; margin-bottom: 10px；width: 300px;">
<h5>我是C組件,我在坐等接收數據</h5>
<p>{{a}}</p>
<p>{{b}}</p>
</div>
`,
data(){
return{
a:'',
b:''
}
},
mounted(){ //兩種接收的方式
var _this = this;
Event.$on('a-msg',function(a){
_this.a=a;
});
Event.$on('b-msg',function(b){
this.b = b;
}.bind(this))
}
};
window.onload=function(){
new Vue({
el:'#box',
data:{
},
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
})
}
</script>
</head>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
</html>效果圖：
以上是“vue $on指的是什么意思”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
