Vue2.0-元件間通訊、元件間傳遞資料方法總結（帶例子）
阿新 • • 發佈：2019-02-17
元件間通訊-傳遞資料
父元件給子元件傳遞資料，子元件需要設定props來宣告自己的預期資料，如果傳遞的資料有‘-’，子元件要用小駝峰形式接受：
<div id="app">
<aaa></aaa>
</div>
<template id='A'>
<div>
<h1>A元件{{num}}</h1>
<bbb :num='num'></bbb>
</div>
</template>
<template 傳遞的資料如果是引用型別的，父子元件就可以雙向控制
<div id 子元件要獲取父元件的資料也可通過$parent
var vm=new Vue({
el:'#app',
components:{
'aaa':{
template:'#A',
data:function(){
return {
content:{
num:1
}
}
},
components:{
'bbb':{
template:'#B',
data:function(){
return {
content:{
num:null
}
}
},
mounted(){
this.content.num=this.$parent.content.num
}
}
}
}
}
})元件、例項上的this物件有children,$root,就形成了viewmodel鏈，理論上來說，任何兩個元件之間的資料都可相互呼叫了
子元件更改父元件資料：父元件將自己更改資料的方法傳遞給子元件呼叫：
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>這是父親(A)</p>
<p>這是我兒子和我說的話:{{msg}}</p>
<hr>
<bbb :tell-dady="hearSonWord"></bbb>
</div>
</template>
<template id="bbb">
<div>
<p>這是兒子(B)</p>
和爸爸說的話:<input type="text" v-model="msg">{{msg}}
</div>
</template>
// 父元件可以將自己方法傳遞給子元件來呼叫，實現子元件更改父元件的資料
<script>
Vue.component("bbb",{
template:"#bbb",
props:['tellDady'],
data:function(){
return {
msg:''
}
},
watch:{
msg:function(){
this.tellDady(this.msg)
}
},
methods:{
}
})
Vue.component("aaa",{
template:"#aaa",
data:function(){
return {
msg:''
}
},
methods:{
hearSonWord:function(word){
this.msg = word
}
}
})
new Vue({
el:"#app"
})
</script>子元件更改父元件資料：也可以父元件給子元件繫結一個事件，事件的處理程式可以是父元件的一個方法，當子元件自己觸發這個事件的時候會相當於呼叫了父元件的方法：
<div id="app">
<aaa></aaa>
</div>
<template id="aaa">
<div>
<p>這是父親(A)</p>
<p>這是我兒子和我說的話:{{msg}}</p>
<hr>
<bbb @tell-dady="hearSonWord"></bbb>
</div>
</template>
<template id="bbb">
<div>
<p>這是兒子(B)</p>
和爸爸說的話:<input type="text" v-model="msg">{{msg}}
</div>
</template>
<script>
Vue.component("bbb",{
template:"#bbb",
data:function(){
return {
msg:''
}
},
watch:{
msg:function(){
this.$emit("tell-dady",this.msg)
}
},
methods:{
}
})
Vue.component("aaa",{
template:"#aaa",
data:function(){
return {
msg:''
}
},
methods:{
hearSonWord:function(word){
this.msg = word
}
}
})
new Vue({
el:"#app"
})
</script>父元件獲取子元件資料時可用$children,也可用ref：
<div id="app">
<father></father>
</div>
<template id='Father'>
<div>
<button @click='get'>get</button>
<p></p>
<son ref='one'></son>
<son></son>
<son></son>
</div>
</template>
<template id='Son'>
<div>
<input type="text" v-model='msg'/>
</div>
</template>
<script>
Vue.component('son',{
template:'#Son',
data:function(){
return {
msg:''
}
},
})
Vue.component('father',{
template:'#Father',
methods:{
get:function(){
console.log(this.$refs.one.msg)
}
}
})
var vm=new Vue({
el:'#app'
})
</script>非父子元件通訊：event bus：（適用於主動給資料）
父子元件通訊也可用，但是沒有必要
<div id="app">
<aaa></aaa>
<bbb></bbb>
</div>
<template id='aaa'>
<div>
<input type="text" @keydown.enter='change'/>
</div>
</template>
<template id='bbb'>
<div class='box' :style="{background:color}">
</div>
</template>
<script>
var bus=new Vue() //建立一個空的 Vue 例項作為事件匯流排
Vue.component('aaa',{
template:'#aaa',
data:function(){
return {
}
},
//給資料的一方觸發bus裡的函式並傳值
methods:{
change:function(e){
console.log(e.target.value)
bus.$emit('a-give',e.target.value)
}
}
})
Vue.component('bbb',{
template:'#bbb',
data:function(){
return {
color:'red'
}
},
//接收資料的元件在鉤子函式裡繫結函式
mounted:function(){
let that = this
bus.$on('a-give',function(res){
that.color=res
})
}
})
var vm=new Vue({
el:'#app'
})
</script>