vue的一大特色就是組件化，所以組件之間的資料互動是非常重要，而我們經常使用組件之間的通信的方法有：props,$refs和emit，
初識組件之間的通信的屬性和方法
props的使用
子組件使用父組件的資料，使用vue的屬性props，
當我們在父組件parent里面嵌套一個子組件son的時候，如果我們需要使用父組件的資料的時候，我們可以在子組件標簽上面系結一個屬性，然后在子組件里面通過props來呼叫這個屬性，就可以使用這個資料了，
//父組件
<sonPart :list="listDate"></sonPart>
//子組件
<div>{{list}}</div>
export default{
props:["list"]
}
props的資料型別
1，陣列：當我們簡單使用資料的時候，這時候props可以是一個陣列的型別
props: ['list1','list2'.....]
2，物件：當我們要設定所使用的資料的型別、默認值等的時候，props就可以是一個Object型別
props: {
list1: {
type: Number/String/Boolean/Array/Object, //型別
default: function (){return}, //默認值
required: true/false //是否必填
}
}
$refs
vue有一個$refs屬性，當只是組件的內容的時候，可以通過這個屬性獲得DOM元素，對這個DOM進行操作；如果是這個組件的子組件的時候，可以通過這個屬性獲得這個子組件物件，就可以訪問這個組件里面的data與methods里面的內容了，（這時候取得子組件的資料一般是靜態的）
$refs的使用
在DOM標簽或者組件標簽的時候，添加一個ref屬性，ref="name"，
添加這個屬性后，就可以通過this.$refs.name獲得這個DOM元素或者子組件
//父組件
<son ref="children"><son>
export default {
mounted: {
//這時候就可以獲得了這個子組件
let son = this.$refs.children
}
}
$emit
當父組件獲取的資料，需用通過子組件來動作（click、change等）改變后資料，這時候我們通過ref是獲取不到的，獲取的也是改變前的資料，
因為emit系結的事件觸發的時候，附加引數都會傳給監聽器回呼，所以資料就會改變
//父組件
//template部分
<sonPart @getList="enter"></sonPart>
//js部分
import sonPart from './sonPar.vue';
export default{
data () {
radioData: ''
},
methods:{
enter:function(value){
this.radioData = https://www.cnblogs.com/eternityz/p/value
}
}，
components: {sonPart}
}
//子組件
$emit的引數
當我們使用的emit的時候，第一個引數為父組件使用方法名，后面一個引數為傳遞的資料，當資料有幾個的時候，可以使用物件的形式傳遞引數，
methods: {
getData: function() {
this.$emit("getList",{name: this.dataList,value:"leo"[,....]}
}
}
站在巨人的肩膀上摘蘋果:
https://blog.csdn.net/weixin_33813128/article/details/94177294
https://www.jb51.net/article/140581.htm
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/150729.html
標籤：JavaScript