vue2.0 组件通信
組件通信：
子組件要想拿到父組件數據 props
子組件不允許直接給父級的數據, 賦值操作如果想更改，父組件每次穿一個對象給子組件，
對象之間引用。
例子：
<script>
window.οnlοad=function(){
new Vue({
el:'#box',
data:{
giveData:{
a:'我是父組件數據'
}
},
components:{
'child-com':{
props:['msg'],
template:'#child',
methods:{
change(){
this.msg.a='被改了';
}
}
}
}
});
};
</script>
<template id="child">
<div>
<span>我是子組件</span>
<input type="button" value="按鈕" @click="change">
<strong>{{msg.a}}</strong>
</div>
</template>
<div id="box">
父級: ->{{giveData.a}}
<br>
<child-com :msg="giveData"></child-com>
</div>
例子：自定義事件
<script>
//準備一個空的實例對象
var Event=new Vue();
var A={
template:`
<div>
<span>我是A組件</span> -> {{a}}
<input type="button" value="把A數據給C" @click="send">
</div>
` ,
methods:{
send(){
Event.$emit('a-msg',this.a);
}
},
data(){
return {
a:'我是a數據'
}
}
};
var B={
template:`
<div>
<span>我是B組件</span> -> {{a}}
<input type="button" value="把B數據給C" @click="send">
</div>
`,
methods:{
send(){
Event.$emit('b-msg',this.a);
}
},
data(){
return {
a:'我是b數據'
}
}
};
var C={
template:`
<div>
<h3>我是C組件</h3>
<span>接收過來的A的數據為: {{a}}</span>
<br>
<span>接收過來的B的數據為: {{b}}</span>
</div>
`,
data(){
return {
a:'',
b:''
}
},
mounted(){
//var _this=this;
//接收A組件的數據
Event.$on('a-msg',function(a){
this.a=a;
}.bind(this));
//接收B組件的數據
Event.$on('b-msg',function(a){
this.b=a;
}.bind(this));
}
};
window.οnlοad=function(){
new Vue({
el:'#box',
components:{
'com-a':A,
'com-b':B,
'com-c':C
}
});
};
</script>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div>
</body>
轉載于:https://www.cnblogs.com/nmxs/p/6831418.html
總結
以上是生活随笔為你收集整理的vue2.0 组件通信的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： spring session实现集群中s
- 下一篇： html5倒计时秒杀怎么做,vue 设