vue元件之間的關係
阿新 • • 發佈：2020-08-11
元件之間的關係，主要涉及到父子元件、兄弟元件之間的傳值或呼叫對方方法的方式。
父元件向子元件傳遞（子元件獲取父元件）
v-blind方法
父元件向子元件傳遞資料，在父元件裡使用v-bind繫結一個自定義的屬性，在子元件中通過props接收父元件傳遞的資料。
注意：
props中的資料是隻讀資料
例如：
<div id="app"> <p>這是父元件資料：{{msg}}</p> <!-- 這裡v-bind繫結的自定義的屬性是son，這個屬性名是可以任意修改的，子元件要保持一致 --> <login v-bind:son="msg"></login> </div>
<script type="text/javascript"> var vm = new Vue({ el:'#app', data:{ msg:'100' }, components:{ login:{ template:'<div><h1>這是登入子元件</h1><h3>子元件獲得的父元件資料：{{son}}</h3><h3>這裡是子元件自己的資料：{{sonmsg}}</h3></div>', // 在子元件中通過props接收父元件傳遞的資料 props:['son'], data:function(){ return { sonmsg:'50' } } } } }) </script>
效果如圖：
this.$parent方法
在子元件的方法中使用this.$parent可以獲取父元件的資料或方法
//獲取parent中data裡的msg的值
this.$parent.msg
//呼叫parent中method裡的func的方法
this.$parent.func(123)
子元件向父元件傳遞（父元件獲取子元件
v-on方法
子元件用$emit()觸發事件， 父元件用$on()或者在子元件的自定義標籤上使用v-on來監聽子元件觸發的自定義事件。
例如：
<body> <div id="app"> <!-- 父元件使用子元件裡的v-on監聽 --> <com2 @func="show"></com2> </div> <template id="tmpl"> <div> <h1>這是子元件</h1> <input type="button" name="" id="" value="觸發父元件的方法" @click="myClick" /> </div> </template> <script type="text/javascript"> var com2 = { template:'#tmpl', data(){ return { sonmsg:'123'， } }, methods:{ myClick(){ console.log('觸發子元件中的myclick方法') // 觸發父元件中的方法 this.$emit('func',this.sonmsg) } } } var vm = new Vue({ el:'#app', methods:{ show(data){ console.log('觸發了父元件的方法，父元件獲得了資料：' + data) } }, components:{ com2 } }) </script> </body>
在上面的例子裡，點選按鈕後觸發了子元件中的myclick方法，myclick執行了其中的$emit()函式，$emit()函式的第一個引數值是方法的名稱，後面都是根據需求設定要傳遞的資料。在本例子中，方法名稱是func。
在子元件使用v-on繫結的自定義事件@func='show',事件觸發了父元件中的show方法，並獲得$emit傳過來的引數。
控制檯輸出如下：
ref方法
在子元件裡使用ref註冊元件，在父元件的方法裡可以使用this.$refs獲取到。
<login ref="mylogin"></login>
methods:{
get(){
console.log(this.$refs)
this.$refs.mylogin.show()
console.log(this.$refs.mylogin.msg)
}
},
components:{
login
}
控制檯輸出如下：
this.$children方法
在父元件的方法中使用this.$children可以獲取子元件的資料或方法
注意，和
this.parent不同，this.$children返回的是一個物件陣列，這很好理解，一個子元件只能有一個父元件，但是一個父元件可以有多個子元件
//獲取children中data裡的msg的值
this.$children[0].msg
//呼叫children中method裡的func的方法
this.$children[0].func(123)
兄弟元件之間的傳遞
兄弟元件之間的資料傳遞：bus事件匯流排 $emit/$on.
使用bus事件匯流排前，需要先定義全域性變數
var bus = new Vue()
在第一個元件中使用$emit傳送資料
methods:{
transmit(){
// fs是自定義事件名稱,son1msg是元件中的資料
bus.$emit('fs',this.son1msg)
}
}
在第二個元件中使用$on監聽對應的事件
mounted(){
// 接收元件1傳遞過來的資料 fs為另一個元件設定的自定義事件名
bus.$on('fs',(ret) => {
this.son2msg = ret
})
}
效果如下：